javascript中的DOM介绍
Posted 大家都叫我会长
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript中的DOM介绍相关的知识，希望对你有一定的参考价值。
一、基础知识点
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介绍的主要内容，如果未能解决你的问题，请参考以下文章