一、基础知识点

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，等等。

例如：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <script type="text/javascript">

     window.onload=function(){

         var oDiv=document.getElementById("box");

         var aLis=oDiv.childNodes;

         for(var i=0;i<aLis.length;i++){

             if(aLis[i].nodeType!=3){

                console.log(aLis.nodeName);             }

         }

     }

     </script>

 </head>

 <body>

     <div id="box">

         <ul>

             <li></li>

         </ul>

     </div>

 </body>

 </html>

ul为元素节点，所以输出的值就是1。

在上述代码中有几点需要说明：

1）首先我们通过getElementById()；获取元素，再通过nodeChilds获得该元素下的子节点，因为元素节点的nodeType值是1，所以我们可以通过if判断和for循环就能找到并输出我们所要找的那个节点的nodeName；

另外，需要强调的是，当我们在通过nodeChilds寻找子节点的时候，换行也会被解析成文本节点，而文本节点往往不是我们所要寻找的那个节点，所以我们可以进行if条件筛选。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <script type="text/javascript">

     window.onload=function(){

         var oUl=document.getElementById("box");

         var list=oUl.childNodes;

         console.log(list[0]);

         console.log(list.item(0));

     }

     </script>

 </head>

 <body>

     <ul id="box">

         <li></li>

         <li></li>

     </ul>

 </body>

 </html>

2、以上代码，我们通过nodeChilds找到了ul下的所有子节点，我们可以通过list[0]方括号去访问找出它们，同时也可以使用item()方法来访问

此外，需要强调下的是，当我们用nodeChilds查询出来的结果，其实并不是Array的实例，虽然这么使用也无大碍，我们姑且将其转化数组，如下：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <script type="text/javascript">

     window.onload=function(){

         var oUl=document.getElementById("box");

         var list=oUl.childNodes;

         // console.log(list[0].nodeName);

         // console.log(list.item(0).nodeName);

         var arrOfNodes=Array.prototype.slice.call(list,0);

         console.log(arrOfNodes);

     }

     </script>

 </head>

 <body>

     <ul id="box">

         <li></li>

         <li></li>

     </ul>

 </body>

 </html>
Array.prototype.slice.call(list,0)，此方法可在IE8以上，及其他浏览器上，都可正常运行IE8以下则出现错误，在IE8及以下需要枚举转为数组，改进代码如下：
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <script type="text/javascript">

     window.onload=function(){

         var oUl=document.getElementById("box");

         var list=oUl.childNodes;

         // console.log(list[0].nodeName);

         // console.log(list.item(0).nodeName);

         // var arrOfNodes=Array.prototype.slice.call(list,0);

         // console.log(arrOfNodes);

         function convertArray(nodes){

             var arr=null;

             try{

                 arr=Array.prototype.slice.call(nodes,0);//此针对非IE8及以下的浏览器

             }catch(ex){

                 arr=new Array();//针对IE8及以下的浏览器，进行枚举，转为数组

                 for(var i=0,len=nodes.length;i<len;i++){

                     arr.push(nodes[i]);

                 }

             }

             return arr;

         }

         var arrOfNodes=convertArray(list);

         console.log(arrOfNodes);

     }

     </script>

 </head>

 <body>

     <ul id="box">

         <li></li>

         <li></li>

     </ul>

 </body>

 </html>

笔者在实际的测试过程中发现，在IE8及以下，换行的文本节点未计算在返回的数据中，这点与其他的浏览器稍有区别。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <script type="text/javascript">

     window.onload=function(){

         function convertToArray(nodes){

             var arr=null;

             try{

                 arr=Array.prototype.slice.call(nodes,0);//此针对非IE8及以下的浏览器

             }catch(ex){

                 arr=new Array();//针对IE8及以下的浏览器，进行枚举，转为数组

                 for(var i=0,len=nodes.length;i<len;i++){

                     arr.push(nodes[i]);

                 }

             }

             return arr;

         }

         var oUl=document.getElementById("ul1");

         console.log(oUl.parentNode);//parentNode是body

         // alert(oUl.parentNode);

         list=oUl.childNodes;

         // alert(list);

         var arrOfNodes=convertToArray(list);

         alert(arrOfNodes[0].previousSibling);

         alert(arrOfNodes[0].nextSibling);

         alert(arrOfNodes[4].previousSibling);

         alert(arrOfNodes[4].nextSibling);

     }

     </script>

 </head>

 <body>

     <ul id="ul1">

         <li>1</li>

         <li>2</li>

     </ul>

 </body>

 </html>

本节暂且到这，下节梳理下节点操作的内容

												


											
javascript中的DOM介绍（一）的更多相关文章
	

    
								
  1. 借助JavaScript中的Dom属性改变Html中Table边框的颜色
		
    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...
    
		
    2. 
						
  2. javascript中获取dom元素的高度和宽度
		
    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
    
		
    3. 
						
  3. javascript中获取dom元素高度和宽度
		
    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
    
		
    4. 
						
  4. js | javascript中获取dom元素的高度和宽度
		
    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
    
		
    5. 
						
  5. JavaScript中的DOM及相关操作
		
    一.什么是DOM JavaScript由ECMAScript.DOM和BOM三部分组成,其中DOM代表描述网页内容的方法和接口,即文档对象模型(Document Object Model).在网页上, ...
    
		
    6. 
						
  6. Javascript中的delete介绍
		
    关于JavaScript中的Delete一直没有弄的很清楚,最近看到两篇这方面的文章,现对两文中部分内容进行翻译(内容有修改和添加,顺序不完全一致,有兴趣推荐看原文),希望能对大家有所帮助 一.问题的 ...
    
		
    7. 
						
  7. JavaScript 中的函数介绍
		
    简而言之函数只不过是一组执行某个操作的语句.函数可能会有一些输入参数(在函数体中使用),并在执行后返回值. JavaScript函数也具有这些特性,但它们不仅仅是常规函数.JavaScript函数是对 ...
    
		
    8. 
						
  8. 一些JavaScript中的DOM的优化小技巧
		
    在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象 ...
    
		
    9. 
						
  9. Javascript中的DOM实现显示鼠标的空间位置
		
    为了显示鼠标相对于浏览器的位置(相对于屏幕和页面类似),我们能够利用click事件,获得关于鼠标单击的事件对象event.这个事件对象里的clientX和clientY包括了鼠标的位置信息,所以我突发 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. sleep（强制等待）和implicitly_wait（隐式等待 ）区别与理解---基于python
			
    我们在进行selenium页面自动化的测试的时候,由于需要等待目标页面的加载或由于网络或硬件配置导致的页面加载等待,经常会用到sleep,但是由于在不同场景下对于sleep时间的估计无法十分准确,导致 ...
    
			
    2. 
						
  2. 使用Sidecar将Node.js引入Spring Cloud
			
    网上看到的一篇文章,觉得写得挺好,现转载于此,以方便需要的网友查阅. 该文章介绍了非JAVA语言提供的应用集成到Spring Cloud的这样一个实现,以便我们使用其他语言作为参考. 感谢原作者分享, ...
    
			
    3. 
						
  3. sql  in 和 exist的区别
			
    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp41 select * from A where id in(select  ...
    
			
    4. 
						
  4. Spring MVC 解决无法访问静态文件和"全局异常处理"
			
    我们都知道,Spring MVC的请求都会去找controller控制器,若果我们页面中引入了一个外部样式,这样是没效果的, 我们引入样式的时候是通过<like href="...&q ...
    
			
    5. 
						
  5. css编写注意事项（不定时更新）
			
    CSS的编写是需要积累的,而一个好的css编写习惯对我们将来的成长是非常有利的,我会把我平时看到的或者遇到的会不定时的更新到这里,不时翻一下,但求有所进步. 如果各位看官也有看法和建议,评论下,我也会 ...
    
			
    6. 
						
  6. 历上最强的音乐播放器（jetA…
			
    原文地址:历上最强的音乐播放器(jetAudio-8.0.5.320-Plus-VX-完全汉化版)下载作者:盖世天星 历上最强的音乐播放器(jetAudio-8.0.5.320-Plus-VX-完全汉 ...
    
			
    7. 
						
  7. SNS团队第三次站立会议（2017.04.24）
			
    一.当天站立式会议照片 本次会议主要内容:汇报工作进度,根据完成情况调整进度 二.每个人的工作 成员 今天已完成的工作 明天计划完成的工作 罗于婕 相关数据库文件建立起来  完善数据库文件 龚晓婷 研 ...
    
			
    8. 
						
  8. 201521123052《Java程序设计》第6周学习总结
			
    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
    
			
    9. 
						
  9. 201521123054 《Java程序设计》第5周学习总结
			
    1. 本周学习总结 2. 书面作业 作业参考文件下载 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出 ...
    
			
    10. 
						
  10. 201521123050 《Java程序设计》第4周学习总结
			
    1. 本周学习总结 2. 书面作业 1.注释的应用 1.1使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 2.面向对象设计(大作业1,非常重要) 2.1 将在 ...
    
			
    11.