DOM笔记整理及应用实例

时间：2022-06-04 18:10:43

一.前言

　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

二.查找 HTML 元素

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素
document.getElementById             根据ID获取一个标签

document.getElementsByName          根据name属性获取标签集合

document.getElementsByClassName     根据class属性获取标签集合

document.getElementsByTagName       根据标签名获取标签集合

例;

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>title</title>

</head>

<body>

<p class="intro">你好世界!</p>

<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>

<div>该实例展示了 <b>getElementsByClassName</b> 方法!</div>

<p id="value">该实例展示了  <b>getElementById</b> 方法</p>

<script>

    x=document.getElementsByClassName("intro");

    y=document.getElementsByTagName('div');

    z=document.getElementById("value");

    document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");

    document.write('<p>文本来自div标签' + y[0].innerHTML + "</p>");

    document.write('<p>文本来自id为value的内容;' + z.innerHTML + "</p>");

</script>

</body>

</html>

查找HTML元素

2.2间接查找

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

三.操作

1.内容

innerText   文本

outerText

innerHTML   HTML内容

innerHTML

value       值

例 ：

<html>

<body>

<p id="p1">Hello World!</p>

<script>

document.getElementById("p1").innerHTML="新文本!";

</script>

</body>

</html>

更改HTML元素内容

<!DOCTYPE html>

<html>

<body>

<img id="image" src="smiley.gif">

<script>

document.getElementById("image").src="landscape.jpg";

</script>

</body>

</html>

更改属性

<!DOCTYPE html>

<html>

<body>

<script>

document.write(Date());

</script>

</body>

</html>

更改输出流

2.属性

attributes                // 获取所有标签属性

setAttribute(key,value)   // 设置标签属性

getAttribute(key)         // 获取指定标签属性

/*

var atr = document.createAttribute("class");

atr.nodeValue="democlass";

document.getElementById('n1').setAttributeNode(atr);

*/
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <input type="button" value="全选"  onclick="CheckAll();"/>

    <input type="button" value="取消" onclick="CancelAll();"/>

    <input type="button" value="反选" onclick="ReverseCheck();"/>

    <table border="1" >

        <thead>

        </thead>

        <tbody id="tb">

            <tr>

                <td><input type="checkbox" /></td>

                <td>111</td>

                <td>222</td>

            </tr>

            <tr>

                <td><input type="checkbox" /></td>

                <td>111</td>

                <td>222</td>

            </tr>

            <tr>

                <td><input type="checkbox" /></td>

                <td>111</td>

                <td>222</td>

            </tr>

            <tr>

                <td><input type="checkbox" /></td>

                <td>111</td>

                <td>222</td>

            </tr>

        </tbody>

    </table>

    <script>

        function CheckAll(ths){

            var tb = document.getElementById('tb');

            var trs = tb.childNodes;

            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];

                if(current_tr.nodeType==1){

                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];

                    inp.checked = true;

                }

            }

        }

        function CancelAll(ths){

            var tb = document.getElementById('tb');

            var trs = tb.childNodes;

            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];

                if(current_tr.nodeType==1){

                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];

                    inp.checked = false;

                }

            }

        }

        function ReverseCheck(ths){

            var tb = document.getElementById('tb');

            var trs = tb.childNodes;

            for(var i =0; i<trs.length; i++){

                var current_tr = trs[i];

                if(current_tr.nodeType==1){

                    var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];

                    if(inp.checked){

                        inp.checked = false;

                    }else{

                        inp.checked = true;

                    }

                }

            }

        }

    </script>

</body>

</html>

Demo

3.class操作

className                // 获取所有类名

classList.remove(cls)    // 删除指定类

classList.add(cls)       // 添加类

例：

<html>

<body id="myid" class="mystyle">

<script type="text/javascript">

    x=document.getElementsByTagName('body')[0];

    document.write("Body CSS class: " + x.className);

    document.write("<br />");

    document.write("An alternate way: ");

    document.write(document.getElementById('myid').className);

</script>

</body>

</html>

获取类名

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>title</title>

<style>

.mystyle {

    width: 300px;

    height: 50px;

    background-color: coral;

    color: white;

    font-size: 25px;

}

</style>

</head>

<body>

<p>点击按钮为 DIV 元素添加 "mystyle" 类。</p>

<button onclick="myFunction()">点我</button>

<div id="myDIV">

我是一个 DIV 元素。

</div>

<script>

function myFunction() {

    document.getElementById("myDIV").classList.add("mystyle");

}

</script>

</body>

</html>

classList.add

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>title</title>

<style>

.mystyle {

    width: 300px;

    height: 50px;

    background-color: coral;

    color: white;

    font-size: 25px;

}

.delcss{

    background-color: gray;

    font-size: 40px;

}

</style>

</head>

<body>

<p>点击按钮为 DIV 元素添加 "mystyle" 类。</p>

<button onclick="myFunction()">点我</button>

<div id="myDIV">

我是一个 DIV 元素。

</div>

<div id="delcss" class="delcss">

    删除样式

</div>

<script>

function myFunction() {

    document.getElementById("myDIV").classList.add("mystyle");

    document.getElementById("delcss").classList.remove("delcss")

}

</script>

</body>

</html>

删除类

<!DOCTYPE html>

<html lang="en">

<!--弹框-->

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{display: none}

        .c1{

            position: fixed;

            background: rgba(0,0,0,.6);

            left: 0;

            top:0;

            bottom: 0;

            right: 0;

            z-index: 2;

        }

        .c2{

            position: fixed;

            background-color: white;

            height: 300px;

            width: 300px;

            top:50%;

            left:50%;

            margin-top: -150px;

            margin-left: -150px;

            z-index: 3;

        }

    </style>

</head>

<body>

    <div>

        <table>

            <tr>

                <td>1</td>

                <td>2</td>

                <td>

                    <input type="button" value="点我" onclick="Show();">

                </td>

            </tr>

            <tr>

                <td>1</td>

                <td>2</td>

                <td>

                    <input type="button" value="点我" onclick="Show();">

                </td>

            </tr>

            <tr>

                <td>1</td>

                <td>2</td>

                <td>

                    <input type="button" value="点我" onclick="Show();">

                </td>

            </tr>

        </table>

    </div>

    <div id="shade" class="c1 hide"></div>

    <div id="modal" class="c2 hide">

        <p>用户：<input type="text"/></p>

        <p>密码：<input type="password"/></p>

        <p>

            <input type="button" value="确定">

            <input type="button" value="取消" onclick="Hide();">

        </p>

    </div>

    <script>

        function Show() {

            document.getElementById("shade").classList.remove('hide');

            document.getElementById("modal").classList.remove('hide');

        }

        function Hide() {

            document.getElementById("shade").classList.add('hide');

            document.getElementById("modal").classList.add('hide');

        }

    </script>

</body>

</html>

弹框实例

4.标签操作

　　a.创建标签

// 方式一

var tag = document.createElement('a')

tag.innerText = "Test"

tag.className = "c1"

tag.href = "http://www.cnblogs.com/test"

// 方式二

var tag = "<a class='c1' href='http://www.cnblogs.com/test'>test</a>"

b.操作标签

// 方式一

var obj = "<input type='text' />";

xxx.insertAdjacentHTML("beforeEnd",obj);

xxx.insertAdjacentElement('afterBegin',document.createElement('p'))

//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

// 方式二

var tag = document.createElement('a')

xxx.appendChild(tag)

xxx.insertBefore(tag,xxx[1])

5、样式操作

改变 HTML 元素的样式

document.getElementById(id).style.property=新样式

例;

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>title</title>

</head>

<body>

<p id="p1">Hello World!</p>

<p id="p2">Hello World!</p>

<script>

document.getElementById("p2").style.color="blue";

document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

</script>

<p>以上段落通过脚本修改。</p>

</body>

</html>
<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />

    <script>

        function Focus(ths){

            ths.style.color = "black";

            if(ths.value == '请输入关键字' || ths.value.trim() == ""){

                ths.value = "";

            }

        }

        function Blur(ths){

            if(ths.value.trim() == ""){

                ths.value = '请输入关键字';

                ths.style.color = 'gray';

            }else{

                ths.style.color = "black";

            }

        }

    </script>

demo

6、位置操作

总文档高度

document.documentElement.offsetHeight

当前文档占屏幕高度

document.documentElement.clientHeight

自身高度

tag.offsetHeight

距离上级定位高度

tag.offsetTop

父定位标签

tag.offsetParent

滚动高度

tag.scrollTop

/*

    clientHeight -> 可见区域：height + padding

    clientTop    -> border高度

    offsetHeight -> 可见区域：height + padding + border

    offsetTop    -> 上级定位标签的高度

    scrollHeight -> 全文高：height + padding

    scrollTop    -> 滚动高度

    特别的：

        document.documentElement代指文档根节点

*/
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body style="margin: 0;">

    <div style="height: 900px;">

    </div>

    <div style="padding: 10px;">

        <div id="i1" style="height:190px;padding: 2px;border: 1px solid red;margin: 8px;">

                <p>asdf</p>

                <p>asdf</p>

                <p>asdf</p>

                <p>asdf</p>

                <p>asdf</p>

        </div>

    </div>

    <script>

        var i1 = document.getElementById('i1');

        console.log(i1.clientHeight); // 可见区域：height + padding

        console.log(i1.clientTop);    // border高度

        console.log('=====');

        console.log(i1.offsetHeight); // 可见区域：height + padding + border

        console.log(i1.offsetTop);    // 上级定位标签的高度

        console.log('=====');

        console.log(i1.scrollHeight);   //全文高：height + padding

        console.log(i1.scrollTop);      // 滚动高度

        console.log('=====');

    </script>

</body>

</html>

test

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<style>

    body{

        margin: 0px;

    }

    img {

        border: 0;

    }

    ul{

        padding: 0;

        margin: 0;

        list-style: none;

    }

    .clearfix:after {

        content: ".";

        display: block;

        height: 0;

        clear: both;

        visibility: hidden;

    }

    .wrap{

        width: 980px;

        margin: 0 auto;

    }

    .pg-header{

        background-color: #303a40;

        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);

        -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);

        box-shadow: 0 2px 5px rgba(0,0,0,.2);

    }

    .pg-header .logo{

        float: left;

        padding:5px 10px 5px 0px;

    }

    .pg-header .logo img{

        vertical-align: middle;

        width: 110px;

        height: 40px;

    }

    .pg-header .nav{

        line-height: 50px;

    }

    .pg-header .nav ul li{

        float: left;

    }

    .pg-header .nav ul li a{

        display: block;

        color: #ccc;

        padding: 0 20px;

        text-decoration: none;

        font-size: 14px;

    }

    .pg-header .nav ul li a:hover{

        color: #fff;

        background-color: #425a66;

    }

    .pg-body{

    }

    .pg-body .catalog{

        position: absolute;

        top:60px;

        width: 200px;

        background-color: #fafafa;

        bottom: 0px;

    }

    .pg-body .catalog.fixed{

        position: fixed;

        top:10px;

    }

    .pg-body .catalog .catalog-item.active{

        color: #fff;

        background-color: #425a66;

    }

    .pg-body .content{

        position: absolute;

        top:60px;

        width: 700px;

        margin-left: 210px;

        background-color: #fafafa;

        overflow: auto;

    }

    .pg-body .content .section{

        height: 500px;

    }

</style>

<body onscroll="ScrollEvent();">

<div class="pg-header">

    <div class="wrap clearfix">

        <div class="logo">

            <a href="#">

                <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">

            </a>

        </div>

        <div class="nav">

            <ul>

                <li>

                    <a  href="#">首页</a>

                </li>

                <li>

                    <a  href="#">功能一</a>

                </li>

                <li>

                    <a  href="#">功能二</a>

                </li>

            </ul>

        </div>

    </div>

</div>

<div class="pg-body">

    <div class="wrap">

        <div class="catalog">

            <div class="catalog-item" auto-to="function1"><a>第1张</a></div>

            <div class="catalog-item" auto-to="function2"><a>第2张</a></div>

            <div class="catalog-item" auto-to="function3"><a>第3张</a></div>

        </div>

        <div class="content">

            <div menu="function1" class="section">

                <h1>第一章</h1>

            </div>

            <div menu="function2" class="section">

                <h1>第二章</h1>

            </div>

            <div menu="function3" class="section">

                <h1>第三章</h1>

            </div>

        </div>

    </div>

</div>

    <script>

        function ScrollEvent(){

            var bodyScrollTop = document.body.scrollTop;

            if(bodyScrollTop>50){

                document.getElementsByClassName('catalog')[0].classList.add('fixed');

            }else{

                document.getElementsByClassName('catalog')[0].classList.remove('fixed');

            }

        }

    </script>

</body>

</html>

Demo-滚动固定

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<style>

    body{

        margin: 0px;

    }

    img {

        border: 0;

    }

    ul{

        padding: 0;

        margin: 0;

        list-style: none;

    }

    h1{

        padding: 0;

        margin: 0;

    }

    .clearfix:after {

        content: ".";

        display: block;

        height: 0;

        clear: both;

        visibility: hidden;

    }

    .wrap{

        width: 980px;

        margin: 0 auto;

    }

    .pg-header{

        background-color: #303a40;

        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);

        -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);

        box-shadow: 0 2px 5px rgba(0,0,0,.2);

    }

    .pg-header .logo{

        float: left;

        padding:5px 10px 5px 0px;

    }

    .pg-header .logo img{

        vertical-align: middle;

        width: 110px;

        height: 40px;

    }

    .pg-header .nav{

        line-height: 50px;

    }

    .pg-header .nav ul li{

        float: left;

    }

    .pg-header .nav ul li a{

        display: block;

        color: #ccc;

        padding: 0 20px;

        text-decoration: none;

        font-size: 14px;

    }

    .pg-header .nav ul li a:hover{

        color: #fff;

        background-color: #425a66;

    }

    .pg-body{

    }

    .pg-body .catalog{

        position: absolute;

        top:60px;

        width: 200px;

        background-color: #fafafa;

        bottom: 0px;

    }

    .pg-body .catalog.fixed{

        position: fixed;

        top:10px;

    }

    .pg-body .catalog .catalog-item.active{

        color: #fff;

        background-color: #425a66;

    }

    .pg-body .content{

        position: absolute;

        top:60px;

        width: 700px;

        margin-left: 210px;

        background-color: #fafafa;

        overflow: auto;

    }

    .pg-body .content .section{

        height: 500px;

        border: 1px solid red;

    }

</style>

<body onscroll="ScrollEvent();">

<div class="pg-header">

    <div class="wrap clearfix">

        <div class="logo">

            <a href="#">

                <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">

            </a>

        </div>

        <div class="nav">

            <ul>

                <li>

                    <a  href="#">首页</a>

                </li>

                <li>

                    <a  href="#">功能一</a>

                </li>

                <li>

                    <a  href="#">功能二</a>

                </li>

            </ul>

        </div>

    </div>

</div>

<div class="pg-body">

    <div class="wrap">

        <div class="catalog" id="catalog">

            <div class="catalog-item" auto-to="function1"><a>第1张</a></div>

            <div class="catalog-item" auto-to="function2"><a>第2张</a></div>

            <div class="catalog-item" auto-to="function3"><a>第3张</a></div>

        </div>

        <div class="content" id="content">

            <div menu="function1" class="section">

                <h1>第一章</h1>

            </div>

            <div menu="function2" class="section">

                <h1>第二章</h1>

            </div>

            <div menu="function3" class="section">

                <h1>第三章</h1>

            </div>

        </div>

    </div>

</div>

    <script>

        function ScrollEvent(){

            var bodyScrollTop = document.body.scrollTop;

            if(bodyScrollTop>50){

                document.getElementsByClassName('catalog')[0].classList.add('fixed');

            }else{

                document.getElementsByClassName('catalog')[0].classList.remove('fixed');

            }

            var content = document.getElementById('content');

            var sections = content.children;

            for(var i=0;i<sections.length;i++){

                var current_section = sections[i];

                // 当前标签距离顶部绝对高度

                var scOffTop = current_section.offsetTop + 60;

                // 当前标签距离顶部，相对高度

                var offTop = scOffTop - bodyScrollTop;

                // 当前标签高度

                var height = current_section.scrollHeight;

                if(offTop<0 && -offTop < height){

                    // 当前标签添加active

                    // 其他移除 active

                    var menus = document.getElementById('catalog').children;

                    var current_menu = menus[i];

                    current_menu.classList.add('active');

                    for(var j=0;j<menus.length;j++){

                        if(menus[j] == current_menu){

                        }else{

                            menus[j].classList.remove('active');

                        }

                    }

                    break;

                }

            }

        }

    </script>

</body>

</html>

Demo-滚动菜单

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<style>

    body{

        margin: 0px;

    }

    img {

        border: 0;

    }

    ul{

        padding: 0;

        margin: 0;

        list-style: none;

    }

    h1{

        padding: 0;

        margin: 0;

    }

    .clearfix:after {

        content: ".";

        display: block;

        height: 0;

        clear: both;

        visibility: hidden;

    }

    .wrap{

        width: 980px;

        margin: 0 auto;

    }

    .pg-header{

        background-color: #303a40;

        -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);

        -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);

        box-shadow: 0 2px 5px rgba(0,0,0,.2);

    }

    .pg-header .logo{

        float: left;

        padding:5px 10px 5px 0px;

    }

    .pg-header .logo img{

        vertical-align: middle;

        width: 110px;

        height: 40px;

    }

    .pg-header .nav{

        line-height: 50px;

    }

    .pg-header .nav ul li{

        float: left;

    }

    .pg-header .nav ul li a{

        display: block;

        color: #ccc;

        padding: 0 20px;

        text-decoration: none;

        font-size: 14px;

    }

    .pg-header .nav ul li a:hover{

        color: #fff;

        background-color: #425a66;

    }

    .pg-body{

    }

    .pg-body .catalog{

        position: absolute;

        top:60px;

        width: 200px;

        background-color: #fafafa;

        bottom: 0px;

    }

    .pg-body .catalog.fixed{

        position: fixed;

        top:10px;

    }

    .pg-body .catalog .catalog-item.active{

        color: #fff;

        background-color: #425a66;

    }

    .pg-body .content{

        position: absolute;

        top:60px;

        width: 700px;

        margin-left: 210px;

        background-color: #fafafa;

        overflow: auto;

    }

    .pg-body .content .section{

        height: 500px;

        border: 1px solid red;

    }

</style>

<body onscroll="ScrollEvent();">

<div class="pg-header">

    <div class="wrap clearfix">

        <div class="logo">

            <a href="#">

                <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">

            </a>

        </div>

        <div class="nav">

            <ul>

                <li>

                    <a  href="#">首页</a>

                </li>

                <li>

                    <a  href="#">功能一</a>

                </li>

                <li>

                    <a  href="#">功能二</a>

                </li>

            </ul>

        </div>

    </div>

</div>

<div class="pg-body">

    <div class="wrap">

        <div class="catalog" id="catalog">

            <div class="catalog-item" auto-to="function1"><a>第1张</a></div>

            <div class="catalog-item" auto-to="function2"><a>第2张</a></div>

            <div class="catalog-item" auto-to="function3"><a>第3张</a></div>

        </div>

        <div class="content" id="content">

            <div menu="function1" class="section">

                <h1>第一章</h1>

            </div>

            <div menu="function2" class="section">

                <h1>第二章</h1>

            </div>

            <div menu="function3" class="section" style="height: 200px;">

                <h1>第三章</h1>

            </div>

        </div>

    </div>

</div>

    <script>

        function ScrollEvent(){

            var bodyScrollTop = document.body.scrollTop;

            if(bodyScrollTop>50){

                document.getElementsByClassName('catalog')[0].classList.add('fixed');

            }else{

                document.getElementsByClassName('catalog')[0].classList.remove('fixed');

            }

            var content = document.getElementById('content');

            var sections = content.children;

            for(var i=0;i<sections.length;i++){

                var current_section = sections[i];

                // 当前标签距离顶部绝对高度

                var scOffTop = current_section.offsetTop + 60;

                // 当前标签距离顶部，相对高度

                var offTop = scOffTop - bodyScrollTop;

                // 当前标签高度

                var height = current_section.scrollHeight;

                if(offTop<0 && -offTop < height){

                    // 当前标签添加active

                    // 其他移除 active

                    // 如果已经到底部，现实第三个菜单

                    // 文档高度 ＝ 滚动高度 + 视口高度

                    var a = document.getElementsByClassName('content')[0].offsetHeight + 60;

                    var b = bodyScrollTop + document.documentElement.clientHeight;

                    console.log(a+60,b);

                    if(a == b){

                        var menus = document.getElementById('catalog').children;

                        var current_menu = document.getElementById('catalog').lastElementChild;

                        current_menu.classList.add('active');

                        for(var j=0;j<menus.length;j++){

                            if(menus[j] == current_menu){

                            }else{

                                menus[j].classList.remove('active');

                            }

                        }

                    }else{

                        var menus = document.getElementById('catalog').children;

                        var current_menu = menus[i];

                        current_menu.classList.add('active');

                        for(var j=0;j<menus.length;j++){

                            if(menus[j] == current_menu){

                            }else{

                                menus[j].classList.remove('active');

                            }

                        }

                    }

                    break;

                }

            }

        }

    </script>

</body>

</html>

Demo-滚动高度

7.提交表单

document.geElementById('form').submit()

8.其他操作

console.log                 输出框

alert                       弹出框

confirm                     确认框

// URL和刷新

location.href               获取URL

location.href = "url"       重定向

location.reload()           重新加载

// 定时器

setInterval                 多次定时器

clearInterval               清除多次定时器

setTimeout                  单次定时器

clearTimeout                清除单次定时器

四.事件

DOM笔记整理及应用实例

对于事件需要注意的要点：

  • this
  • event
  • 事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容

实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>title</title>

</head>

<body>

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

</body>

</html>

onclick事件

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>title</title>

</head>

<head>

<script>

function myFunction(){

    var x=document.getElementById("fname");

    x.value=x.value.toUpperCase();

}

</script>

</head>

<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">

<p>字母变大写</p>

</body>

</html>

onchange事件

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>title</title>

</head>

<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

<script>

function mOver(obj){

    obj.innerHTML="Thank You"

}

function mOut(obj){

    obj.innerHTML="Mouse Over Me"

}

</script>

</body>

</html>

onmouse事件

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>title</title>

</head>

<body>

<h1 onmouseover="style.color='red'"onmouseout="style.color='black'">将鼠标移至文部上</h1>

</body>

</html>

鼠标事件

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>title</title>

</head>

<head>

<script>

function mymessage(){

    alert("消息在 onload 事件触发后弹出。");

}

</script>

</head>

<body onload="mymessage()"></body>

</html>

onload事件

<!DOCTYPE html>

<html>

    <head>

        <meta charset='utf-8' />

        <title></title>

        <style>

            .gray{

                color:gray;

            }

            .black{

                color:black;

            }

        </style>

        <script type="text/javascript">

            function Enter(){

               var id= document.getElementById("tip")

               id.className = 'black';

               if(id.value=='请输入关键字'||id.value.trim()==''){

                    id.value = ''

               }

            }

            function Leave(){

                var id= document.getElementById("tip")

                var val = id.value;

                if(val.length==0||id.value.trim()==''){

                    id.value = '请输入关键字'

                    id.className = 'gray';

                }else{

                    id.className = 'black';

                }

            }

        </script>

    </head>

    <body>

        <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>

    </body>

</html>

搜索框

<!DOCTYPE html>

<html>

    <head>

        <meta charset='utf-8' >

        <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>

        <script type='text/javascript'>

            function Go(){

                var content = document.title;

                var firstChar = content.charAt(0)

                var sub = content.substring(1,content.length)

                document.title = sub + firstChar;

            }

            setInterval('Go()',1000);

        </script>

    </head>

    <body>

    </body>

</html>

跑马灯

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .style_before {

            color: lightgrey;

        }

        .style_after {

            color: black;

        }

    </style>

</head>

<body>

    <h3>爱好</h3>

    <div>

        <ul id="i1">

            <li><input type="checkbox" value="1">篮球</li>

            <li><input type="checkbox" value="2">足球</li>

            <li><input type="checkbox" value="3">乒乓球</li>

        </ul>

    </div>

    <button onclick="Cheakall()">全选</button>

    <button onclick="Cancleall()">取消全选</button>

    <button onclick="Reversall()">反选</button>

    <script>

        function Cheakall() {

            var i1 = document.getElementById("i1");

            var cheak = i1.getElementsByTagName("input");

            for (i=0;i<cheak.length;i++) {

                cheak[i].checked = true;

            }

        }

        function Cancleall() {

            var i1 = document.getElementById("i1");

            var cheak = i1.getElementsByTagName("input");

            for (i=0;i<cheak.length;i++) {

                cheak[i].checked = false;

            }

        }

        function Reversall() {

            var i1 = document.getElementById("i1");

            var cheak = i1.getElementsByTagName("input");

            for (i=0;i<cheak.length;i++) {

                if (cheak[i].checked) {

                    cheak[i].checked = false;

                }else {

                    cheak[i].checked = true;

                }

            }

        }

    </script>

</body>

</html>

全选、反选

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide {

            display: none;

        }

        .c1 {

            position: fixed;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            background: rgba(0,0,0,.6);

            z-index: 2;

        }

        .c2 {

            position: fixed;

            width: 400px;

            height: 300px;

            top: 50%;

            left: 50%;

            z-index: 3;

            margin-top: -150px;

            margin-left: -200px;

            background-color: white;

            text-align: center;

            padding-top: 150px;

        }

    </style>

</head>

<body>

    <div><input type="button" value="登录" onclick="hihi()"></div>

    <div id="cc1" class="c1 hide"></div>

    <div id="cc2" class="c2 hide">

        <div>用户名：<input type="text"></div>

        <div>密 码：<input type="text"></div>

        <input type="button" value="确定">

        <input type="button" value="取消" onclick="hisl()">

    </div>

    <script>

        function hihi() {

            document.getElementById("cc1").classList.remove("hide");

            document.getElementById("cc2").classList.remove("hide");

        }

        function hisl() {

            document.getElementById("cc1").classList.add("hide");

            document.getElementById("cc2").classList.add("hide");

        }

    </script>

</body>

</html>

模态对话框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin: 0;

            background-color: #dddddd;

        }

        .w{

            margin: 0 auto;

            width: 980px;

        }

        .pg-header{

            background-color: black;

            color: white;

            height: 48px;

        }

        .pg-body .menu{

            position: absolute;

            left: 200px;

            width: 180px;

            background-color: white;

            float: left;

        }

        .pg-body .menu .active{

            background-color: #425a66;

            color: white;

        }

        .pg-body .fixed{

            position: fixed;

            top: 10px;

        }

        .pg-body .content{

            position: absolute;

            left: 385px;

            right: 200px;

            background-color: white;

            float: left;

        }

        .pg-body .content .item{

            height: 900px;

        }

    </style>

</head>

<body onscroll="Hua();">

    <div class="pg-header">

        <div class="w"></div>

    </div>

    <div class="pg-body">

        <div id="menu" class="menu">

            <ul>

                <li>第一章</li>

                <li>第二章</li>

                <li>第三章</li>

            </ul>

        </div>

        <div id="content" class="content">

            <div class="item">床前明月管</div>

            <div class="item">疑是地上霜</div>

            <div class="item" style="height: 100px">我是郭德纲</div>

        </div>

    </div>

    <script>

        function Hua() {

            var xo = document.getElementById("menu");

            var huaGao = document.body.scrollTop;

            if (document.body.scrollTop>48){

                xo.classList.add("fixed");

            }else {

                xo.classList.remove("fixed");

            }

            var bod = document.body.offsetHeight;

            var conAbs = document.getElementsByClassName("content")[0].offsetHeight;

            var ck = document.documentElement.clientHeight;

//            console.log((bod + conAbs) == (ck + huaGao));

            if ((bod + conAbs) == (ck + huaGao)) {

                var lenLi = xo.getElementsByTagName("li");

                for (var i=0;i<lenLi.length;i++){

                    if (i == lenLi.length - 1){

                        lenLi[i].className = "active";

                    }else {

                        lenLi[i].className = "";

                    }

                }

                return

            }

            var item = document.getElementById("content").children;

            for (var i=0;i<item.length;i++){

                var currentItem = item[i];

                var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop;

                var currentItemWindowTop = currentItemBodyTop - huaGao;

                var currentHeight = currentItem.offsetHeight;

                var bottomHeight = currentItemBodyTop + currentHeight;

                var ziJi = xo.getElementsByTagName("li")[i];

                if (currentItemWindowTop<0 && huaGao < bottomHeight){

                    ziJi.className = "active";

                } else {

                    ziJi.className = "";

                }

            }

        }

    </script>

</body>

</html>

书签章节

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        ul{

            list-style: none;

            padding: 0;

            margin: 0;

        }

        ul li{

            float: left;

            background-color: #2459a2;

            color: white;

            padding: 8px 10px;

        }

        .clearfix:after{

            display: block;

            content: '.';

            height: 0;

            visibility: hidden;

            clear: both;

        }

        .hide{

            display: none;

        }

        .tab-menu .title{

            background-color: #dddddd;

        }

        .tab-menu .title .active{

            background-color: #0099dd;

            color: black;

        }

        .tab-menu .content{

            border: 1px solid #dddddd;

            min-height: 150px;

        }

        ul li:hover {

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div style="width: 400px; margin: 0 auto;">

        <div class="tab-menu">

            <div class="title clearfix">

                <ul>

                    <li target="h1" class="active" onclick="Show(this);">索尼</li>

                    <li target="h2" onclick="Show(this);">谷歌</li>

                    <li target="h3" onclick="Show(this);">腾讯</li>

                </ul>

            </div>

            <div id="content" class="content">

                <div con="h1">1...</div>

                <div con="h2" class="hide">2...</div>

                <div con="h3" class="hide">3...</div>

            </div>

        </div>

    </div>

    <script>

        function Show(ths) {

            var Showli = ths;

            var littarget = Showli.getAttribute("target");

            var liclass = Showli.parentNode.children;

            for (var i=0;i<liclass.length;i++) {

                if (liclass[i].getAttribute("target") == littarget) {

                    liclass[i].classList.add("active");

                }else {

                    liclass[i].classList.remove("active");

                }

            }

            var liycontent = document.getElementById("content").children;

            for (var i=0;i<liycontent.length;i++) {

                if (liycontent[i].getAttribute("con") == littarget) {

                    liycontent[i].className = "";

                }else {

                    liycontent[i].className = "hide";

                }

            }

        }

    </script>

</body>

</html>

菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .go-top {

            position: fixed;

            right: 28px;

            bottom: 19px;

            width: 38px;

            height: 40px;

            background-color: aliceblue;

        }

        .hide {

            display: none;

        }

    </style>

</head>

<body onscroll="Func();">

    <div style="height: 2000px"></div>

    <div id="i2" class="go-top hide">

        <a onclick="GoTop();">返回顶部</a>

    </div>

    <script>

        function Func() {

            var scrolltop = document.body.scrollTop;

            var ii = document.getElementById("i2");

            if (scrolltop>300) {

                ii.classList.remove("hide");

            }else {

                ii.classList.add("hide");

            }

        }

        function GoTop() {

            document.body.scrollTop = 0;

        }

    </script>

</body>

</html>

返回顶部

相关文章