DOM

DOM：

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

一、查找元素

　1、直接查找

1 document.getElementById             根据ID获取一个标签
2 document.getElementsByName          根据name属性获取标签集合
3 document.getElementsByClassName     根据class属性获取标签集合
4 document.getElementsByTagName       根据标签名获取标签集合

　2、间接查找

 1 parentNode 　　　　　　// 父节点
 2 childNodes          // 所有子节点
 3 firstChild          // 第一个子节点
 4 lastChild           // 最后一个子节点
 5 nextSibling         // 下一个兄弟节点
 6 previousSibling     // 上一个兄弟节点

 7 nodeType　　　　　　 //返回以数字值返回指定节点的节点类型。

　　　　　　　　　　　　 //如果节点是(标签）元素节点，则 nodeType 属性将返回 1
　　　　　　　　　　　　 //如果节点是属性节点，则 nodeType 属性将返回 2

 8 parentElement 　　　　　　　　　　// 父节点标签元素 
 9 children 　　　　　　 　　　　　　// 所有子标签
 10 firstElementChild  　　　　　　// 第一个子标签元素
 11 lastElementChild   　　　　　 // 最后一个子标签元素
 12 nextElementtSibling 　　　　 // 下一个兄弟标签元素
 13 previousElementSibling 　　 // 上一个兄弟标签元素

二、操作

　1、内容

1 innerText   文本
2 outerText
3 innerHTML   HTML内容
4 innerHTML  
5 value       值

　2、获取属性

1 attributes                // 获取所有标签属性
2 setAttribute(key,value)   // 设置标签属性
3 getAttribute(key)         // 获取指定标签属性
4  
5 /*
6 var atr = document.createAttribute("class");
7 atr.nodeValue="democlass";
8 document.getElementById('n1').setAttributeNode(atr);
9 */

　3、class操作

1 className                // 获取所有类名
2 classList.remove(cls)    // 删除指定类
3 classList.add(cls)       // 添加类

　4、标签操作

　　（1）.创建标签

1 // 方式一
2 var tag = document.createElement('a')
3 tag.innerText = "wupeiqi"
4 tag.className = "c1"
5 tag.href = "http://www.cnblogs.com/wupeiqi"
6  
7 // 方式二
8 var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

　　（2）.操作标签

 1 // 方式一
 2 var obj = "<input type='text' />";
 3 xxx.insertAdjacentHTML("beforeEnd",obj);
 4 xxx.insertAdjacentElement('afterBegin',document.createElement('p'))
 5  
 6 //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
 7  
 8 // 方式二
 9 var tag = document.createElement('a')
10 xxx.appendChild(tag)
11 xxx.insertBefore(tag,xxx[1])

　5、样式操作

1 var obj = document.getElementById('i1')
2  
3 obj.style.fontSize = "32px";
4 obj.style.backgroundColor = "red";

　6、位置操作

 1 总文档高度
 2 document.documentElement.offsetHeight
 3   
 4 当前文档占屏幕高度
 5 document.documentElement.clientHeight
 6   
 7 自身高度
 8 tag.offsetHeight
 9   
10 距离上级定位高度
11 tag.offsetTop
12   
13 父定位标签
14 tag.offsetParent
15   
16 滚动高度
17 tag.scrollTop
18  
19 /*
20     clientHeight -> 可见区域：height + padding
21     clientTop    -> border高度
22     offsetHeight -> 可见区域：height + padding + border
23     offsetTop    -> 上级定位标签的高度
24     scrollHeight -> 全文高：height + padding
25     scrollTop    -> 滚动高度
26     特别的：
27         document.documentElement代指文档根节点

　7、提交表单

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

　8、其他操作

 1 console.log                 输出框
 2 alert                       弹出框
 3 confirm                     确认框
 4   
 5 // URL和刷新
 6 location.href               获取URL
 7 location.href = "url"       重定向
 8 location.reload()           重新加载
 9   
10 // 定时器
11 setInterval                 多次定时器
12 clearInterval               清除多次定时器
13 setTimeout                  单次定时器
14 clearTimeout                清除单次定时器

三、事件

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

this
event
事件链以及跳出

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

四、DOM实例小集

1、正反选、全选

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>check test</title>
 6 </head>
 7 <body>
 8 
 9     <input type="submit" value="全选" onclick="CheckAll();">
10     <input type="submit" value="取消" onclick="CancelAll();">
11     <input type="submit" value="反选" onclick="ReverseAll();">
12 
13     <table border="1" style="margin: 10px;">
14 
15         <thead>
16             <tr>
17                 <td>check</td>
18                 <td>content</td>
19             </tr>
20         </thead>
21         <tbody id="tb">
22             <tr>
23                 <td><input type="checkbox"></td>
24                 <td>11111</td>
25             </tr>
26             <tr>
27                 <td><input type="checkbox"></td>
28                 <td>22222</td>
29             </tr>
30             <tr>
31                 <td><input type="checkbox"></td>
32                 <td>33333</td>
33             </tr>
34             <tr>
35                 <td><input type="checkbox"></td>
36                 <td>44444</td>
37             </tr>
38             <tr>
39                 <td><input type="checkbox"></td>
40                 <td>55555</td>
41             </tr>
42         </tbody>
43 
44     </table>
45 
46 <script>
47 
48     function CheckAll(ele) {
49         var td = document.getElementById("tb");
50         var trs = td.childNodes;
51         for (var i=0;i<trs.length;i++){
52             current_tr = trs[i];
53             if(current_tr.nodeType ==1){//相等则表示是 元素（标签）节点
54                 var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
55                 inp.checked = true
56             }
57         }
58 
59     }
60     
61     function CancelAll(ele) {
62         var tb = document.getElementById('tb');
63         var trs = tb.childNodes;
64         for(var i=0;i<trs.length;i++){
65             current_tr = trs[i];
66             if(current_tr.nodeType ==1){
67                 var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
68                 inp.checked = false;
69             }
70         }
71         
72     }
73 
74     function ReverseAll(ele) {
75         var tb = document.getElementById('tb');
76         var trs = tb.childNodes;
77         for (var i=0;i<trs.length;i++){
78             current_tr = trs[i];
79             if(current_tr.nodeType == 1){
80                 var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
81                 if(inp.checked){
82                     inp.checked = false;
83                 }
84                 else {
85                     inp.checked = true;
86                 }
87             }
88         }
89 
90     }
91     
92 
93 </script>
94 
95 </body>
96 </html>

正反选全选取消全选

2、简单搜索框

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset='utf-8' />
 5         <title></title>
 6         
 7         <style>
 8             .gray{
 9                 color:gray;
10             }
11             .black{
12                 color:black;
13             }
14         </style>
15         <script type="text/javascript">
16             function Enter(){
17                var id= document.getElementById("tip")
18                id.className = 'black';
19                if(id.value=='请输入关键字'||id.value.trim()==''){
20                     id.value = ''
21                }
22             }
23             function Leave(){
24                 var id= document.getElementById("tip")
25                 var val = id.value;
26                 if(val.length==0||id.value.trim()==''){
27                     id.value = '请输入关键字'
28                     id.className = 'gray';
29                 }else{
30                     id.className = 'black';
31                 }
32             }
33         </script>
34     </head>
35     <body>
36         <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>
37     </body>
38 </html>

简单搜索框

3、跑马灯

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset='utf-8' >
 5         <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>
 6         <script type='text/javascript'>
 7             function Go(){
 8                 var content = document.title;
 9                 var firstChar = content.charAt(0)
10                 var sub = content.substring(1,content.length)
11                 document.title = sub + firstChar;
12             }
13             setInterval('Go()',1000);
14         </script>
15     </head>
16     <body>    
17     </body>
18 </html>

跑马灯

4、省市二级联动示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 
 8 <body>
 9 
10     <select id="provinces">
11         <option value="">请选择省份</option>
12     </select>
13 
14     <select id="citys">
15         <option value="">请选择城市</option>
16     </select>
17 
18 
19 
20 <script>
21 
22     data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]};
23     var pro_ele = document.getElementById('provinces');
24     var city_ele = document.getElementById('citys');
25 
26     for(var key in data){
27         var ele = document.createElement('option');
28         ele.innerHTML = key;
29         pro_ele.appendChild(ele);
30     }
31 
32     pro_ele.onchange = function () {
33         //selectedIndex:目前选中，数值形式
34         var citys = data[this.options[this.selectedIndex].innerHTML];
35         console.log(citys);
36         city_ele.options.length=1;//city_ele下option只保留一个
37         
38         for(var i=0;i<citys.length;i++){
39             var ele = document.createElement('option');
40             ele.innerHTML = citys[i];
41             city_ele.appendChild(ele);
42         }
43 
44     }
45 
46 </script>
47 
48 </body>

省市二级联动示例

5、模态对话框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .content{
 8             height: 1800px;
 9             background-color: white;
10         }
11 
12         .shade{
13             position: fixed;
14             top:0;
15             left: 0;
16             right: 0;
17             bottom: 0;
18             background-color: gray;
19             opacity: 0.3;
20         }
21 
22         .model{
23             width: 200px;
24             height: 200px;
25             background-color: bisque;
26             position: absolute;
27             top:50%;
28             left: 50%;
29             margin-top: -100px;
30             margin-left: -100px;
31 
32         }
33         .hide{
34             display: none;
35         }
36     </style>
37 </head>
38 <body>
39 
40 <div class="content">
41     <button onclick="show()">show</button>
42     hellohellohellohellohellohellohellohellohellohellohellohello
43 </div>
44 
45 <div class="shade hide"></div>
46 
47 <div class="model hide">
48     <button onclick="cancel()">cancel</button>
49 </div>
50 
51 
52 <script>
53     function show() {
54         var ele_shade=document.getElementsByClassName("shade")[0];
55         var ele_model=document.getElementsByClassName("model")[0];
56 
57         ele_model.classList.remove("hide");
58         ele_shade.classList.remove("hide");
59 
60     }
61     function cancel() {
62         var ele_shade=document.getElementsByClassName("shade")[0];
63         var ele_model=document.getElementsByClassName("model")[0];
64 
65         ele_model.classList.add("hide");
66         ele_shade.classList.add("hide");
67 
68     }
69 </script>
70 </body>
71 </html>

模态对话框

posted on 2018-06-22 00:03 Eric_nan 阅读(178) 评论(0) 编辑收藏举报