Python自动化运维之23、Dom

时间：2023-03-09 17:51:18
Python自动化运维之23、Dom

　　文档对象模型（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>

定时器

三、事件　

Python自动化运维之23、Dom

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

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

默认事件与自定义事件

　

相关文章