　　文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。Dom+JavaScript就能使网页动起来，一般使用JQuery来做这事，JQuery封装了JavaScript+Dom变得更为简单。

一、查找元素

　　如果我们想用js操作文档，首先要做的便是要找到要操作的元素，查找元素有直接查找和间接查找，下面来看一下这两类查找，

1、直接查找

document.getElementById             根据ID获取一个标签

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

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

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

2、间接查找(一般都是和直接找配合使用)　

// 会包括所有标签和换行(一般不会使用这种)

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

// 只包括所有标签(一般这种使用比较多)

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

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

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

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

二、操作　

1、内容　

　　操作内容主要是 innerText，innerHTML和value其中前两种比较简单，主要是第三种在操作表单的时候，用得最多，text，password和textarea的value可以分为一类，checkbox，radio和select的value可以分为一类

innerText   // a标签中的文本内容

innerHTML   // HTML内容,比如<a><span>aaa</span><a>中的<span>标签

value       // input标签中的值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>跑马灯</title>

</head>

<body>

    <div id="i1" style="display: inline-block;background: green;color:white;">欢迎领导莅临指导</div>

    <script>

        setInterval("f1()",900);

        function f1(){

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

            var text = tag.innerText;

            var a = text.charAt(0);

            var sub = text.substring(1,text.length);

            var new_str = sub + a;

            tag.innerText = new_str;

        }

    </script>

</body>

</html>

跑马灯

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>搜索框</title>

</head>

<body>

    <input id="i1" type="text" value="请输入关键字" onfocus="Focus()" onblur="Blur()"/>

    <input id="i2" type="text"/>

    <script>

        function Focus() {

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

            if(tag.value == "请输入关键字"){

                tag.value = "";

            }

        }

        function Blur() {

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

            var val = tag.value;

            if(val.trim().length == 0){

                tag.value = "请输入关键字";

            }

        }

    </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 lang="en">

<head>

    <meta charset="UTF-8">

    <title>checkbox全选取消反选</title>

</head>

<body>

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

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

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

    <table border="1">

        <thead>

            <tr>

                <th>序号</th>

                <th>IP</th>

                <th>Port</th>

            </tr>

        </thead>

        <tbody id="tb">

            <tr>

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

                <td>1.1.1.1</td>

                <td>22</td>

            </tr>

            <tr>

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

                <td>1.1.1.2</td>

                <td>22</td>

            </tr>

            <tr>

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

                <td>1.1.1.3</td>

                <td>22</td>

            </tr>

        </tbody>

    </table>

    <script>

        function CheckAll() {

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

            var trs = tb.children;

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

                var current_tr = trs[i];

                var ck = current_tr.firstElementChild.firstElementChild;

                ck.checked = true;

//                ck.setAttribute('checked','checked');

            }

        }

        function CancleAll() {

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

            var trs = tb.children;

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

                var current_tr = trs[i];

                var ck = current_tr.firstElementChild.firstElementChild;

                ck.checked = false;

//                ck.removeAttribute('checked');

            }

        }

        function ReverseAll() {

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

            var trs = tb.children;

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

                var current_tr = trs[i];

                var ck = current_tr.firstElementChild.firstElementChild;

                if(ck.checked){

                    ck.checked = false;

//                    ck.removeAttribute('checked');

                }else{

                    ck.checked = true;

//                    ck.setAttribute('checked','checked');

                }

            }

        }

    </script>

</body>

</html>

checkbox全选取消反选

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .content{

            margin: 0 auto;

            width: 300px;

            border: 1px solid chocolate;

        }

        ul{

            list-style: none;

            background-color: #cccccc;

        }

        ul li{

            float: left;

            display: block;

            background-color: #2459a2;

            padding:0 10px;

            height: 50px;

            line-height: 50px;

            cursor: pointer;

        }

        .clearfix:after{

            display: block;

            content: '';

            height: 0;

            visibility: hidden;

            clear: both;

        }

        #info{

            min-height: 200px;

            width: 300px;

        }

        .hide{

            display: none;

        }

        .active{

            background-color: white;

            color: black;

        }

    </style>

</head>

<body>

    <div class="content">

        <ul class="clearfix">

            <li tg="1" class="active" onclick="Func(this)">价格走势</li>

            <li tg="2" onclick="Func(this)">市场分布</li>

            <li tg="3" onclick="Func(this)">其他</li>

        </ul>

        <div id="info">

            <div targ="1" >conten1</div>

            <div targ="2" class="hide">conten2</div>

            <div targ="3" class="hide">conten3</div>

        </div>

    </div>

    <script>

        function Func(ths) {

            var bot = ths.parentElement.children;

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

                bot[i].classList.remove('active')

            }

            ths.classList.add('active');

            var vtg = ths.getAttribute('tg');

            var divs = document.getElementById('info').children;

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

                if(divs[i].getAttribute('targ') == vtg){

                    divs[i].classList.remove('hide');

                }else{

                    divs[i].classList.add('hide');

                }

            }

        }

    </script>

</body>

</html>

不同菜单不同内容

3、class操作

className                 // 获取所有类名,字符串格式

classList                     // 获取所有类名,列表格式

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

classList.add(cls)        // 添加类

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>模态对话框</title>

    <style>

        *{

            margin: 0;

        }

        .hide{

            display:none;

        }

        .shade{

            position: fixed;

            top:0;

            bottom:0;

            left:0;

            right:0;

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

        }

        .modal{

            position: fixed;

            height: 400px;

            width:500px;

            background-color: white;

            top:50%;

            left:50%;

            margin-top: -200px;

            margin-left: -250px;

        }

    </style>

</head>

<body>

    <div style="height: 2000px;background-color: #dddddd;">

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

    </div>

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

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

        <input type="text" placeholder="用户名"/><br/>

        <input type="password" placeholder="密码"/><br/>

        <a href="javascript:void(0)" onclick="cancle()">取消</a>

    </div>

    <script>

        function show() {

            var tag1 = document.getElementById('shade');

            var tag2 = document.getElementById('modal');

            tag1.classList.remove('hide');

            tag2.classList.remove('hide');

        }

        function cancle() {

            var tag1 = document.getElementById('shade');

            var tag2 = document.getElementById('modal');

            tag1.classList.add('hide');

            tag2.classList.add('hide');

        }

    </script>

</body>

</html>

模态对话框

4、标签操作

a.创建标签(两种方式)

// 方式一

var tag = document.createElement('a')

tag.innerText = "wupeiqi"

tag.className = "c1"

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

// 方式二

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

b.操作标签(两种方式和创建标签是对应的)　　

// 方式一

var tag = document.createElement('a')

xxx.appendChild(tag)

xxx.insertBefore(tag,xxx[1])

// 方式二

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

xxx.insertAdjacentHTML("beforeEnd",obj);

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

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

5、样式操作　

ar obj = document.getElementById('i1')

obj.style.fontSize = "32px";

obj.style.backgroundColor = "red";

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>点赞</title>

    <style>

        .item{

            padding:50px;

            position: relative;

        }

        .item span{

            position: absolute;

            top:49px;

            left:71px;

            opacity:1;

            font-size:18px;

            color: green;

        }

    </style>

</head>

<body>

    <div class="item">

        <a onclick="Favor(this);">赞1</a>

        <!--<span>+1</span>-->

    </div>

    <div class="item">

        <a onclick="Favor(this);">赞2</a>

    </div>

    <div class="item">

        <a onclick="Favor(this);">赞3</a>

    </div>

    <script>

        function Favor(ths) {

            // ths形参 --> this实参 --> 是当前触发事件的标签

            var top = 49;

            var left = 71;

            var op = 1;

            var fontSize = 18;

            var tag = document.createElement('span');

            tag.innerText = '+1';

            tag.style.position = 'absolute';

            tag.style.top = top + 'px';

            tag.style.left = left + 'px';

            tag.style.opacity = op;

            tag.style.fontSize = fontSize + 'px';

            ths.parentElement.appendChild(tag);

            var intervarl = setInterval(function () {

                top -= 10;

                left += 10;

                fontSize += 5;

                op -= 0.1;

                tag.style.top = top + 'px';

                tag.style.left = left + 'px';

                tag.style.opacity = op;

                tag.style.fontSize = fontSize + 'px';

                if(op == 0.2){

                    clearInterval(intervarl);

                    ths.parentElement.removeChild(tag);

                }

            },50)

        }

    </script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>搜索框二</title>

</head>

<body>

    <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>

</body>

</html>

搜索框二

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 lang="en">

<head>

    <meta charset="UTF-8">

    <title>返回顶部</title>

    <style>

        *{

            margin:0;

        }

        .back{

            position: fixed;

            width:5px;

            right: 60px;

            bottom: 20px;

            color: red;

            cursor: pointer;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body onscroll="BodyScroll();">

    <div style="height:2000px;background-color: #dddddd;"></div>

    <div id="back" class="back hide" onclick="Backtop()">返回顶部</div>

    <script>

        function Backtop() {

            document.body.scrollTop = 0;

        }

        function BodyScroll() {

            var s = document.body.scrollTop;

            var t = document.getElementById('back');

            if(s > 100){

                t.classList.remove('hide');

            }else {

                t.classList.add('hide');

            }

        }

    </script>

</body>

</html>

返回顶部

<!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>

滚动固定

<!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>

滚动菜单

<!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>

滚动高度

7、提交表单

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>a标签提交表单</title>

</head>

<body>

    <form id="f1">

        <input type="text"/>

        <input type="submit" value="提交"/>

        <a onclick="Submit()">提交</a>

    </form>

    <script>

        function Submit() {

            var form = document.getElementById('f1');

            form.submit();

        }

    </script>

</body>

</html>

a标签提交表单

8、其他操作

console.log                 输出框

alert                       弹出框

confirm                     确认框

// URL和刷新

location.href               获取URL

location.href = "url"       重定向

location.reload()           重新加载

// 定时器

setInterval                 多次定时器

clearInterval               清除多次定时器

setTimeout                  单次定时器

clearTimeout                清除单次定时器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>定时器</title>

</head>

<body>

    <div id="status" style="color:red">

    </div>

    <input type="button" value="删除" onclick="DeleteStatus()"/>

    <script>

        function DeleteStatus() {

            var s = document.getElementById('status');

            s.innerText = '删除成功';

            setTimeout(function () {

                s.innerText = "";

            },5000);

        }

    </script>

</body>

</html>

定时器

三、事件　

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

this
event
事件链以及跳出

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>event事件的内容</title>

    <style>

        *{

            margin: 0;

        }

        .hide{

            display:none;

        }

        .shade{

            position: fixed;

            top:0;

            bottom:0;

            left:0;

            right:0;

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

        }

        .modal{

            position: fixed;

            height: 400px;

            width:500px;

            background-color: white;

            top:50%;

            left:50%;

            margin-top: -200px;

            margin-left: -250px;

        }

    </style>

</head>

<body>

    <div style="height: 2000px;background-color: #dddddd;">

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

    </div>

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

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

        <input type="text" placeholder="用户名"/><br/>

        <input type="password" placeholder="密码"/><br/>

        <!--<a href="javascript:void(0)" onclick="cancle()">取消</a>-->

    </div>

    <script>

        function show() {

            var tag1 = document.getElementById('shade');

            var tag2 = document.getElementById('modal');

            tag1.classList.remove('hide');

            tag2.classList.remove('hide');

        }

        function cancle() {

                        var tag1 = document.getElementById('shade');

            var tag2 = document.getElementById('modal');

            tag1.classList.add('hide');

            tag2.classList.add('hide');

        }

        window.onkeydown = function (event) {

            console.log(event);

            if(event.keyCode == 27){

                cancle();

            }

        }

    </script>

</body>

</html>

event事件的内容(模态对话框)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>默认事件与自定义事件</title>

</head>

<body>

    <!--自定义事件优先的标签:a,form-->

    <!--默认事件优先的标签:checkbox-->

    <!--return 事件,返回false则默认的事件不执行,true则会执行默认事件-->

    <form action="https://www.baidu.com">

        <input type="text" id="username"/>

        <input type="submit" value="提交" onclick="return SubmitForm();"/>

    </form>

    <script>

        function SubmitForm() {

            var user = document.getElementById('username');

            if(user.value.length > 0){

                // 可以提交

                return true;

            }else{

                //不可以提交

                alert('用户名输入不能为空');

                return false;

            }

        }

    </script>

</body>

</html>

默认事件与自定义事件

Python自动化运维之23、Dom的更多相关文章

python自动化运维篇
1-1 Python运维-课程简介及基础 1-2 Python运维-自动化运维脚本编写 2-1 Python自动化运维-Ansible教程-Ansible介绍 2-2 Python自动化运维-Ansi ...
Day1 老男孩python自动化运维课程学习笔记
2017年1月7日老男孩python自动化运维课程正式开课第一天学习内容: 上午 1.python语言的基本介绍 python语言是一门解释型的语言,与1989年的圣诞节期间,吉多·范罗苏姆为了在阿 ...
python自动化运维学习第一天--day1
学习python自动化运维第一天自己总结的作业所使用到知识:json模块,用于数据转化sys.exit 用于中断循环退出程序字符串格式化.format字典.文件打开读写with open(file, ...
【目录】Python自动化运维
目录:Python自动化运维笔记 Python自动化运维 - day2 - 数据类型 Python自动化运维 - day3 - 函数part1 Python自动化运维 - day4 - 函数Part2 ...
Python自动化运维的职业发展道路（暂定）
Python职业发展之路 Python自动化运维工程 Python基础 Linux Shell Fabric Ansible Playbook Zabbix Saltstack Puppet Dock ...
Python自动化运维：技术与最佳实践 PDF高清完整版|网盘下载内附地址提取码|
内容简介: <Python自动化运维:技术与最佳实践>一书在中国运维领域将有“划时代”的重要意义:一方面,这是国内第一本从纵.深和实践角度探讨Python在运维领域应用的著作:一方面本书的 ...
Python自动化运维技术与最佳实践PDF高清完整版免费下载|百度云盘|Python基础教程免费电子书
点击获取提取码:7bl4 一.内容简介 <python自动化运维:技术与最佳实践>一书在中国运维领域将有"划时代"的重要意义:一方面,这是国内第一本从纵.深和实践角度探 ...
python自动化运维之CMDB篇-大米哥
python自动化运维之CMDB篇视频地址:复制这段内容后打开百度网盘手机App,操作更方便哦链接:https://pan.baidu.com/s/1Oj_sglTi2P1CMjfMkYKwCQ ...
python自动化运维之路~DAY5
python自动化运维之路~DAY5 作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.模块的分类模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数 ...

随机推荐

mysql 引擎区分
MySQL常用的存储引擎为MyISAM.InnoDB.MEMORY.MERGE,其中InnoDB提供事务安全表,其他存储引擎都是非事务安全表. MyISAM是MySQL的默认存储引擎.MyISAM不支 ...
45个必备的实用jQuery代码段[转载]
1. 如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“s ...
MyBatis完全使用指南
MyBatis完全使用指南转 http://www.jianshu.com/p/1c7c7d1bba33 MyBatis MyBatis作为一个轻量的SQL映射框架,确实很简单,但是知识点挺多,实际 ...
Away3D ATFTexture
之前在项目中贴图大量使用了 PNG 和 jpg 遇到了个问题.在使用BitmapTexture的时候发现是必须MIP 不管你是否开启或者关闭 MIP 他都会去创建.而每次MIP都会根据贴图大小去生 ...
Swing的设计是MVC的典范
无论你的项目是否用到了Swing技术,我都要说,Swing是一个设计优秀的Java包,它充满了大师的智慧.假设你学了Java却连一个Button还不会写,就象你学习Visual Basic却不会用Bu ...
[struts2学习笔记] 第一节关于struts2的简单认知
本文地址:http://blog.csdn.net/sushengmiyan/article/details/40298287 官方文档:http://struts.apache.org/releas ...
javascript中涉及到汉字的比较
在使用js中的"=="进行字符串的比较时,发现在英文情况下是ok的,但在中文比较时则不行了. 在网上搜索,提供了一个解决方法,使用 stringObject.localeCompa ...
[转] 一个资深iOS开发者对于React Native的看法
当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很 ...
[转] 使用Git进行小项目代码管理
http://www.uml.org.cn/pzgl/201206155.asp 之前在公司使用过SVN(无甚感觉)和ClearCase(把人恶心死的东西)两种版本控制工具,都不满意.后来想自己写点东 ...
empty函数PHP
empty译为: adj.空的,空虚的,空洞的;空闲的,无效的,徒劳的;无聊的,愚蠢的;言语或行动空洞的 vt.(使)成为空的, 把…弄空;把…腾出来 vi.成为空的;流空 n.空车;空的东西是PH ...

Python自动化运维之23、Dom

一、查找元素

1、直接查找

2、间接查找(一般都是和直接找配合使用)

二、操作

1、内容

2、操作属性

3、class操作

4、标签操作

5、样式操作

6、位置操作

7、提交表单

8、其他操作

三、事件

Python自动化运维之23、Dom的更多相关文章

随机推荐

热门专题

2、间接查找(一般都是和直接找配合使用)　

二、操作　

1、内容　

5、样式操作　

三、事件　