javascript中的DOM介紹（一）
阿新 • • 發佈：2017-10-08
item 檢測 turn 及其 篩選 層次 proto nbsp log
一、基礎知識點
1、DOM是文檔對象模型，是針對HTML和XML文檔的一個API（應用程序接口）
2、DOM描繪了一個層次化的節點數，允許開發人員進行添加，移除個修改等操作
3、IE瀏覽器中所有的DOM對象都是以COM對象形式實現的，因此出現了不少不可兼容的東西
二、Node.ELEMENT_NODE常量
1、經本人實測，因為此常量在IE9以下就不支持了，所以一般在檢測元素的時候都會用nodeType屬性，而nodeType屬性根據元素的類型不同，用12個常量值來表示，比如元素節點nodeType值即為1，文本節點的nodeType值即為3，屬性節點的nodeType值即為2，等等。
例如：
1<!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var oDiv=document.getElementById("box"); 9 var aLis=oDiv.childNodes; 10 for(var i=0;i<aLis.length;i++){ 11 if(aLis[i].nodeType!=3){ 12 console.log(aLis.nodeName);14 } 15 } 16 17 } 18 </script> 19 </head> 20 <body> 21 <div id="box"> 22 <ul> 23 <li></li> 24</ul> 25 </div> 26 </body> 27 </html>
ul為元素節點，所以輸出的值就是1。
在上述代碼中有幾點需要說明：
1）首先我們通過getElementById()；獲取元素，再通過nodeChilds獲得該元素下的子節點，因為元素節點的nodeType值是1，所以我們可以通過if判斷和for循環就能找到並輸出我們所要找的那個節點的nodeName；
另外，需要強調的是，當我們在通過nodeChilds尋找子節點的時候，換行也會被解析成文本節點，而文本節點往往不是我們所要尋找的那個節點，所以我們可以進行if條件篩選。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var oUl=document.getElementById("box"); 9 var list=oUl.childNodes; 10 console.log(list[0]); 11 console.log(list.item(0)); 12 } 13 </script> 14 </head> 15 <body> 16 <ul id="box"> 17 <li></li> 18 <li></li> 19 </ul> 20 </body> 21 </html>
2、以上代碼，我們通過nodeChilds找到了ul下的所有子節點，我們可以通過list[0]方括號去訪問找出它們，同時也可以使用item()方法來訪問
此外，需要強調下的是，當我們用nodeChilds查詢出來的結果，其實並不是Array的實例，雖然這麽使用也無大礙，我們姑且將其轉化數組，如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var oUl=document.getElementById("box"); 9 var list=oUl.childNodes; 10 // console.log(list[0].nodeName); 11 // console.log(list.item(0).nodeName); 12 var arrOfNodes=Array.prototype.slice.call(list,0); 13 console.log(arrOfNodes); 14 } 15 </script> 16 </head> 17 <body> 18 <ul id="box"> 19 <li></li> 20 <li></li> 21 </ul> 22 </body> 23 </html>
Array.prototype.slice.call(list,0)，此方法可在IE8以上，及其他瀏覽器上，都可正常運行IE8以下則出現錯誤，在IE8及以下需要枚舉轉為數組，改進代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var oUl=document.getElementById("box"); 9 var list=oUl.childNodes; 10 // console.log(list[0].nodeName); 11 // console.log(list.item(0).nodeName); 12 // var arrOfNodes=Array.prototype.slice.call(list,0); 13 // console.log(arrOfNodes); 14 function convertArray(nodes){ 15 var arr=null; 16 try{ 17 arr=Array.prototype.slice.call(nodes,0);//此針對非IE8及以下的瀏覽器 18 }catch(ex){ 19 arr=new Array();//針對IE8及以下的瀏覽器，進行枚舉，轉為數組 20 for(var i=0,len=nodes.length;i<len;i++){ 21 arr.push(nodes[i]); 22 } 23 } 24 return arr; 25 } 26 27 var arrOfNodes=convertArray(list); 28 console.log(arrOfNodes); 29 } 30 </script> 31 </head> 32 <body> 33 <ul id="box"> 34 <li></li> 35 <li></li> 36 </ul> 37 </body> 38 </html>
筆者在實際的測試過程中發現，在IE8及以下，換行的文本節點未計算在返回的數據中，這點與其他的瀏覽器稍有區別。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 function convertToArray(nodes){ 9 var arr=null; 10 try{ 11 arr=Array.prototype.slice.call(nodes,0);//此針對非IE8及以下的瀏覽器 12 }catch(ex){ 13 arr=new Array();//針對IE8及以下的瀏覽器，進行枚舉，轉為數組 14 for(var i=0,len=nodes.length;i<len;i++){ 15 arr.push(nodes[i]); 16 } 17 } 18 return arr; 19 } 20 var oUl=document.getElementById("ul1"); 21 console.log(oUl.parentNode);//parentNode是body 22 // alert(oUl.parentNode); 23 list=oUl.childNodes; 24 // alert(list); 25 var arrOfNodes=convertToArray(list); 26 alert(arrOfNodes[0].previousSibling); 27 alert(arrOfNodes[0].nextSibling); 28 alert(arrOfNodes[4].previousSibling); 29 alert(arrOfNodes[4].nextSibling); 30 } 31 </script> 32 </head> 33 <body> 34 <ul id="ul1"> 35 <li>1</li> 36 <li>2</li> 37 </ul> 38 </body> 39 </html>
本節暫且到這，下節梳理下節點操作的內容
javascript中的DOM介紹（一）