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介绍的主要内容,如果未能解决你的问题,请参考以下文章

48个值得掌握的JavaScript代码片段(上)

javascript中的DOM结构介绍

JavaScript中的DOM,BOM详细介绍;

javascript中的DOM介绍

javascript HTML DOM 简单介绍

更改页面javascript代码(TamperMonkey)以将键盘笔触发送到父DOM