js常用DOM操作
在博客園看到了蘇夏寫的常用DOM整理文章，地址：http://www.cnblogs.com/cabbagen/p/4579412.html，然后抽時間都試了一下這些常用的DOM操作。在這里記錄一下。
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>?
轉載于:https://www.cnblogs.com/dibaosong/p/4588161.html
總結
- 上一篇： 驱动下通过进程PID获得进程名 （动态获
- 下一篇： POJ - 2018 二分+单调子段和