Python菜鸟之路：DOM基础

前言

　　DOM 是 Document Object Model（文档对象模型）的缩写，定义了访问和操作 HTML 文档的标准方法。DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

　　DOM 将 HTML 文档表达为树结构。

DOM中的层级关系

　　节点树中的节点彼此拥有层级关系。

　　父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点

DOM查找元素

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  // 上一个兄弟标签元素

Ps:节点和标签的区别

节点：既包含元素，又包含文本内容(包括一些换行符)

标签：只包含标签

DOM操作

操作内容

innerText    文本

outerText

innerHTML   HTML内容
outerHTML

value           值

PS:
1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。

innerHTML是符合W3C标准的属性，而innerText、outerText、outerHTML只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签

操作属性

attributes                // 获取所有标签属性

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

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

实例1：基本使用：

        - eg: <input id='i1' name='n1' type='text' alex='sb'>

        - obj = document.getElementById('i1')

        - obj.getAttribute('name')

        - obj.setAttribute('name', '123')

        - obj.removeAttribute('name')

实例1：利用操作属性，实现全选和反选

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <div id="p1">

         <p>hhh</p>

     </div>

     <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>用户名</th>

                 <th>密码</th>

             </tr>

         </thead>

         <tbody id="tb">

             <tr>

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

                 <td>2</td>

                 <td>22</td>

             </tr>

             <tr>

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

                 <td>2</td>

                 <td>22</td>

             </tr>

              <tr>

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

                 <td>2</td>

                 <td>22</td>

             </tr>

             <tr>

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

                 <td>2</td>

                 <td>22</td>

             </tr>

         </tbody>

     </table>

     <script src="jquery-1.12.4.js"></script>

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

全选和反选(操作属性实现)

操作class

        - obj.className             // 获取class属性字符串

        - obj.classList                // 获取class属性，结果以列表形式展示

        - obj.classList.add(cls)     // 给对象增加class属性

        - obj.classList.remove(cls)   // 移除对象class属性

实例1：利用操作class的方法，实现模态对话框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .hide{

            display: none !important;

        }

        .shade{

            position: fixed;

            top:0;

            bottom: 0;

            left: 0;

            right: 0;

            /*background-color: black;*/

            /*opacity: 0.6;*/

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

            z-index: 1000;

        }

        .modal{

            height: 200px;

            width: 400px;

            background-color: white;

            position: fixed;

            top: 50%;

            left: 50%;

            margin-left: -200px;

            margin-top: -100px;

            z-index: 1001;

        }

    </style>

</head>

<body>

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

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

    </div>

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

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

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

    </div>

    <script>

        function ShowModal(){

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

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

            t1.classList.remove('hide');

            t2.classList.remove('hide');

        }

        function HideModal(){

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

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

            t1.classList.add('hide');

            t2.classList.add('hide');

        }

        window.onkeydown = function(event){

            //console.log(event);

            if(event.keyCode == 27){

                HideModal();

            }

        }

    </script>

</body>

</html>

模态对话框

操作样式

    - obj.style.属性 = '值'

操作实例：

<input type="text" value="123123123" alex="sb" class="hide baby girl" name="n1" id="i1">

tag = document.getElementById('i1')

tag.style.color='red'

tag.style.fontSize = '22px'

PS:这里需要注意的是，css中的属性font-size 在 dom中需要写作fontSize，其他带'-'的写法也是这样

实例代码：利用操作样式，实现点赞

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>点赞实现</title>

     <style>

         .item{

             padding:50px;

             position: relative;

         }

     </style>

 </head>

 <body>

     <div class="item">

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

     </div>

     <div class="item">

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

     </div>

     <div class="item">

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

     </div>

     <div class="item">

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

     </div>

     <script>

         function Favor(ths) {

             console.log(ths.parentElement);

             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 interval = setInterval(function (){

                 top -= 10;

                 left += 10;

                 fontSize +=5;

                 op -= 0.1;

                 console.log(tag.style.filter)

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

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

                 tag.style.opacity = op;

                 //tag.style.filter="alpha(opacity=" + op + ")";  //firefox中的透明度

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

                 if(op <= 0.2){

                     clearInterval(interval);

                     ths.parentElement.removeChild(tag);

                 }

             } , 50);

         }

     </script>

 </body>

 </html>

点赞(操作样式)

操作标签

创建标签

// 方式一：对象

var tag = document.createElement('a') //创建a标签对象

tag.innerText = "xxxx"

tag.className = "aaa"

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

// 方式二：创建字符串

var tag = "<a class='aaa' href='http://www.cnblogs.com/xxxoo'>xxxx</a>"

将标签添加到HTML中

// 方式一

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

操作位置

/*

    clientHeight -> 可见区域： 自身标签height + padding

    clientTop    -> border高度

    offsetHeight -> 可见区域：自身标签height + padding + border高度

    offsetTop    -> 上级定位标签的高度：找寻父级或者父父..标签为relative的标签，二者之间的高度

    scrollHeight -> 全文高：height + padding

    scrollTop    -> 滚动高度：当前鼠标滚动的高度

    特别的：

        document.documentElement代指文档根节点

*/

　实践案例1：返回顶部按钮自动显现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>返回顶部</title>

    <style>

        .back{

            position: fixed;

            right: 20px;

            bottom: 20px;

            color:red;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body onscroll="BodyScroll();">

    <div style="height: 2000px; background-color: #9a9a9a"></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');

            console.log(s)

            if(s>=100){

                t.classList.remove('hide')

            }else{

                t.classList.add('hide')

            }

        }

    </script>

</body>

</html>

返回顶部

定时器

setInterval                 多次定时器

clearInterval               清除多次定时器

setTimeout                  单次定时器

clearTimeout                清除单次定时器

实例代码1：延时消失

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div id="status" style="color: red;">等待删除</div>

     <input type="submit" onclick="DeleteStatus();" value="删除">

     <script>

         function DeleteStatus() {

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

             s.innerText = '删除成功';

             setInterval(function () {

                 s.innerText = "";

             }, 5000)

         }

     </script>

 </body>

 </html>

利用定时器实现延时消失

主动提交表单

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

提交表单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form action="http://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>

阻断表单提交onclick="return func();"

其他操作

console.log                 输出框

alert                       弹出框

confirm                     确认框

// URL和刷新

location.href               获取URL

location.href = "url"       重定向

location.reload()           重新加载

事件

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

this
event
事件链以及跳出

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

全局事件绑定 window.onKeyDown = function(){}

    - 事件

        - 特殊参数：this

        - 全局事件绑定 ： windows.onclick   # 全局事件： windows.onKeyDown = function(){}

        - 特殊参数：event，包含事件相关的内容

        - 默认事件：onclick等，优先级较高，即自定义的优先级比较高，比如a标签和form标签

                    特殊：input type='checkbox'则 默认的checked优先级高

        - 阻止后边事件发生： onclick='return func();'，如果func()返回false则后边的事件不会发生

        window.onkeydown = function(event){

            console.log(event.keyCode);

//            if(event.keyCode == 27){ //这个是ESC键的keyCode

//                    Func();

//            }

        }

捕捉Esc键

巴特西