js經常使用DOM操做經常使用DOM整理

時間 2019-12-06

原文原文鏈接

在博客園看到了蘇夏寫的經常使用DOM整理文章，地址：http://www.cnblogs.com/cabbagen/p/4579412.html，而後抽時間都試了一下這些經常使用的DOM操做。在這裏記錄一下。html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>經常使用dom</title>
 6     <script>
 7         window.onload = function(){
 8             function $(id){ //獲取id元素
 9                 return typeof id === 'string' ? document.getElementById(id) : id;
10             }
11             //取得節點
12             var box = $('box'); //獲得id名爲box的元素節點
13             var div = document.getElementsByTagName('div'); //獲得全部標籤爲div的元素節點集合
14             var name = document.getElementsByName('our'); //獲得name爲our的元素
15             //var cls = document.getElementsByClassName('box'); //ie8及如下不支持
16             //var clsdiv = document.querySelectorAll('#box,#boxs'); //找到全部id爲box和boxs的元素數組集合querySelector只能找到第一個，ie8以上才支持
17 
18 
19             //遍歷節點
20             var ul = $('ul');
21             var lis = ul.children; //取得ul下的直系子元素li
22             var lis1 = getFirst(ul); //在火狐下它返回指定元素的子元素集合，包括HTML節點，全部屬性，文本。只有當nodeType==1時纔是元素節點，2是屬性節點，3是文本節點。
23             function getFirst(ele){ //經過childNodes封裝獲得第一個子元素
24                 for(var i=0;i<ele.childNodes.length;i++){
25                     if(ele.childNodes[i].nodeType == 1){
26                         return ele.childNodes[i];
27                     }
28                 }
29             };
30             var lisFirst = firstChild(ul);  //也能夠這樣獲取到第一個子元素，比較方便
31             var lisLast = lastChild(ul); //也能夠這樣獲取到最後一個子元素，比較方便
32             function firstChild(node){ //封裝獲得第一個子元素
33                 return node.firstElementChild || node.firstChild; 
34             };
35             function lastChild(node){ //封裝獲得最後一個子元素
36                 return node.lastElementChild || node.lastChild; 
37             };
38             function prev(node){ //獲得上一個元素
39                 return node.previousElementSibling || node.previousSibling; 
40             };
41             function next(node){ //獲得下一個元素
42                 return node.nextElementSibling || node.nextSibling; 
43             };
44             var parent = $('con').parentNode; //獲得id爲con的元素的父節點也就是獲得了id爲box的元素節點
45 
46 
47             //獲取節點信息
48             var nodeName = $('box').nodeName; //獲取元素或者屬性節點的標籤名稱 結果是：DIV 
49             var nodeValue = $('con').childNodes[0].nodeValue; //獲取文本節點的內容 結果是：文本節點內容
50             var innerHTML = $('inner').innerHTML; //獲取並設置元素節點的內容 結果是：文本節點內容<span>123</span> 可能會包含HTML標籤
51             var innerText = innerText($('inner')); //獲取並設置元素節點的純文本內容不包含標籤結果是：文本節點內容123 (ie用innerText，ff用textContent)
52             function innerText(node){
53                 return node.textContent || node.innerText;
54             };
55             for(var i=0;i<lis.length;i++){
56                 var index = lis[i].getAttribute('index'); //獲取屬性節點的值
57                 lis[i].setAttribute('index', i); //設置屬性節點的值
58             };
59             var nodeType = $('ul').attributes[0].nodeType; //獲取節點的類型 元素節點： 1；屬性節點： 2；文本節點： 3；文檔節點： 9；註釋節點： 8；
60 
61 
62             //操做節點
63             var input = document.createElement('input'); //建立元素節點
64             var textNode = document.createTextNode('大家好'); //建立文本節點
65             var attrNode = document.createAttribute('index'); //建立屬性節點
66             attrNode.value = '123';
67             $('box').setAttributeNode(attrNode);
68             //$('box').remove(); //刪除節點 在ie中 .removeNode(true)
69             $('ul').removeChild($('ul').children[0]);
70             document.body.appendChild(textNode); //插入節點
71             var clone = $('con').cloneNode([true]); //克隆節點 傳入true爲深度複製，會把內容也複製過來
72             document.body.appendChild(clone);
73             $('box').replaceChild(input, $('con')); //替換節點
74             function addClass(element,className) { //添加class
75                  element.className += className;
76             };
77             function removeClass(element,removeClassName) { //移除class
78                  var classStr = element.className;
79                  element.className = classStr.replace(removeClassName,'').split(/\s+/).join(' ').replace(/^\s+/,'').replace(/\s+$/,'');
80             }  
81             addClass($('box'), ' haha ei');
82             removeClass($('box'), 'haha');
83         }
84     </script>
85 </head>
86 <body>
87     <div id="box" class="box wo" name="our">
88         <div id="con">文本節點內容</div>
89     </div>
90     <div id="boxs" class="box" name="our"></div>
91     <div id="inner">文本節點內容<span>123</span></div>
92     <ul id="ul">
93         <li index="0"></li>
94         <li index="1"></li>
95         <li index="2"></li>
96     </ul>
97 </body>
98 </html>