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：利用操作属性，实现全选和反选

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9     <div id="p1">
10         <p>hhh</p>
11     </div>
12 
13     <input type="button" value="全选" onclick="CheckAll()" />
14     <input type="button" value="取消" onclick="CancleAll()"/>
15     <input type="button" value="反选" onclick="ReverseAll()"/>
16 
17     <table border="1">
18         <thead>
19             <tr>
20                 <th>序号</th>
21                 <th>用户名</th>
22                 <th>密码</th>
23             </tr>
24         </thead>
25         <tbody id="tb">
26             <tr>
27                 <td><input type="checkbox" /></td>
28                 <td>2</td>
29                 <td>22</td>
30             </tr>
31             <tr>
32                 <td><input type="checkbox" /></td>
33                 <td>2</td>
34                 <td>22</td>
35             </tr>
36              <tr>
37                 <td><input type="checkbox" /></td>
38                 <td>2</td>
39                 <td>22</td>
40             </tr>
41             <tr>
42                 <td><input type="checkbox" /></td>
43                 <td>2</td>
44                 <td>22</td>
45             </tr>
46         </tbody>
47     </table>
48     <script src="jquery-1.12.4.js"></script>
49     <script>
50         function CheckAll(){
51             var tb = document.getElementById('tb');
52             var trs = tb.children;
53             for(var i=0;i<trs.length;i++){
54                 var current_tr = trs[i];
55                 var ck = current_tr.firstElementChild.firstElementChild;
56                 ck.setAttribute('checked','checked');
57             }
58         }
59         function CancleAll(){
60             var tb = document.getElementById('tb');
61             var trs = tb.children;
62             for(var i=0;i<trs.length;i++){
63                 var current_tr = trs[i];
64                 var ck = current_tr.firstElementChild.firstElementChild;
65                 ck.removeAttribute('checked');
66             }
67         }
68         function ReverseAll() {
69             var tb = document.getElementById('tb');
70             var trs = tb.children;
71             for (var i = 0; i < trs.length; i++) {
72                 var current_tr = trs[i];
73                 var ck = current_tr.firstElementChild.firstElementChild;
74                 if (ck.checked) {
75                     ck.checked = false;
76                     ck.removeAttribute('checked');
77                 } else {
78                     ck.checked = true;
79                     ck.setAttribute('checked', 'checked');
80                 }
81             }
82         }
83     </script>
84 </body>
85 </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，其他带'-'的写法也是这样

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>点赞实现</title>
 6     <style>
 7         .item{
 8             padding:50px;
 9             position: relative;
10         }
11     </style>
12 </head>
13 <body>
14     <div class="item">
15         <a onclick="Favor(this)">赞1</a>
16     </div>
17     <div class="item">
18         <a onclick="Favor(this)">赞2</a>
19     </div>
20     <div class="item">
21         <a onclick="Favor(this)">赞3</a>
22     </div>
23     <div class="item">
24         <a onclick="Favor(this)">赞4</a>
25     </div>
26 
27 
28     <script>
29         function Favor(ths) {
30             console.log(ths.parentElement);
31             var top = 49;
32             var left = 71;
33             var op = 1;
34             var fontSize = 18;
35 
36             var tag = document.createElement('span');
37             tag.innerText = '+1';
38             tag.style.position = 'absolute';
39             tag.style.top = top + 'px';
40             tag.style.left = left + 'px';
41             tag.style.opacity = op;
42             tag.style.fontSize = fontSize + 'px';
43             ths.parentElement.appendChild(tag);
44 
45             var interval = setInterval(function (){
46                 top -= 10;
47                 left += 10;
48                 fontSize +=5;
49                 op -= 0.1;
50                 console.log(tag.style.filter)
51                 tag.style.top = top + 'px';
52                 tag.style.left = left + 'px';
53                 tag.style.opacity = op;
54                 //tag.style.filter="alpha(opacity=" + op + ")";  //firefox中的透明度
55                 tag.style.fontSize = fontSize + 'px';
56                 if(op <= 0.2){
57                     clearInterval(interval);
58                     ths.parentElement.removeChild(tag);
59                 }
60             } , 50);
61         }
62     </script>
63 </body>
64 </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：延时消失

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="status" style="color: red;">等待删除</div>
 9 
10     <input type="submit" onclick="DeleteStatus();" value="删除">
11 
12     <script>
13         function DeleteStatus() {
14             var s = document.getElementById('status');
15             s.innerText = '删除成功';
16             setInterval(function () {
17                 s.innerText = "";
18             }, 5000)
19         }
20     </script>
21 </body>
22 </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键

posted @ 2016-08-25 18:29 jishuweiwang 阅读(480) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

程序员改变了世界、妹子改变了程序员！