关于DOM操作的实例分析

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

 1 parentNode          // 父节点 2 childNodes          // 所有子节点 3 firstChild          // 第一个子节点 4 lastChild           // 最后一个子节点 5 nextSibling         // 下一个兄弟节点 6 previousSibling     // 上一个兄弟节点 7    8 parentElement           // 父节点标签元素 9 children                // 所有子标签10 firstElementChild       // 第一个子标签元素11 lastElementChild        // 最后一个子标签元素12 nextElementtSibling     // 下一个兄弟标签元素13 previousElementSibling  // 上一个兄弟标签元素

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

1 attributes                                      // 获取所有标签属性2 setAttribute(key,value)                 // 设置标签属性3 getAttribute(key)                          // 获取指定标签属性

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

1 // 方式一2 var tag = document.createElement("a");3 tag.innerText = "百度";4 tag.className = "c1";5 tag.href = "6   7 // 方式二8 var tag = "百度"

 1 // 方式一 2 function AddEle1() { 3     //创建一个标签 4     //将标签添加到i1里面 5     var tag = "
"; 6     //beforeBegin、afterBegin、beforeEnd、afterEnd 7     document.getElementById("i1").insertAdjacentHTML("beforeEnd",tag); 8 } 9  10 // 方式二11 function AddEle2() {12     //创建一个标签13     //将标签添加到i1里面14     var tag = document.createElement("input");15     tag.setAttribute("type", "text");16     tag.style.fontSize = "16px";17     tag.style.color = "red";18  19     var p = document.createElement("p");20     p.appendChild(tag);21     document.getElementById("i1").appendChild(p);22 }

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

 1 总文档高度 2 document.documentElement.offsetHeight 3   4 当前文档占屏幕高度 5 document.documentElement.clientHeight 6   7 自身高度 8 tag.offsetHeight 9  10 距离上级定位高度11 tag.offsetTop12  13 父定位标签14 tag.offsetParent15  16 滚动高度17 tag.scrollTop

1 document.getElementById("form").submit()

 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                清除单次定时器

 1  2  3  4      5      6  7  8     
欢迎xxx莅临指导
 9     27 28 

 1  2  3  4      5      6     32 33 34     
35         36         37             38                 39                     40                     41                 42             43             44                 45                     46                     47                 48                 49                     50                     51                 52                 53                     54                     55                 56             57         
主机名
端口
1.1.1.1
190
1.1.1.2
192
1.1.1.3
193
58     
59     60     
61     62  63     64     
65         
66         
67         
68         
69     
70     71     81 82 

 1  2  3  4      5      6   7  8  9     
10         11         12         13         14             15                 16                     17                     18                     19                 20             21             22                 23                     24                     25                     26                 27                 28                     29                     30                     31                 32                 33                     34                     35                     36                 37             38         
选择
主机名
端口
1.1.1.1
190
1.1.1.2
192
1.1.1.3
193
39     
40     73 74 

 1  2  3  4      5      6     17 18 19     
20         
21             
菜单1
22             
23                 
内容1
24                 
内容1
25           &;bsp;     
内容1
26             
27         
28         
29             
菜单2
30             
31                 
内容2
32                 
内容2
33                 
内容2
34             
35         
36         
37             
菜单3
38             
39                 
内容3
40                 
内容3
41                 
内容3
42             
43         
44         
45             
菜单4
46             
47                 
内容4
48                 
内容4
49                 
内容4
50             
51         
52     
53     64 65 

 1  2  3  4      5      6     17 18 19     
20         21         22     
23     37 38