一、基础知识点

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. XMind与MindManager哪个好（网易云课堂老师:Array老师讲解稿）
			
    XMind与MindManager哪个好 作者:网易云课堂老师:Array老师讲解稿 思维导图是一种将放射性思考具体化的方法,可以将人们的创造性思维及时捕捉并呈现,深受商业人士的喜爱.目前,XMind ...
    
			
    2. 
						
  2. 消息摘要技术(MD5)
			
    1.使用消息摘要技术对密码加密 数据库存储的是经过消息摘要技术加密之后的信息, 避免保存密码明文,提升了系统安全性 必要性说明: 如果存储明文密码,数据库系统管理员和攻破系统的黑客是可以拿到你的所有信 ...
    
			
    3. 
						
  3. struts2和spring mvc的比较
			
    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt236   Struts2 Springmvc       机制 基于filt ...
    
			
    4. 
						
  4. Python Keras module 'keras.backend' has no attribute 'image_data_format'
			
    问题: 当使用Keras运行示例程序mnist_cnn时,出现如下错误: 'keras.backend' has no attribute 'image_data_format' 程序路径https: ...
    
			
    5. 
						
  5. xml字符串转对象xml文件转对象
			
    判断是否是ie浏览器和非ie浏览器的方法有多种,在此只介绍用例中的方法: 1.解析xml字符串,得到xml对象的方式: function createXml(str){ if(document.all ...
    
			
    6. 
						
  6. python re group()
			
    python group() 正则表达式中,group()用来提出分组截获的字符串,()用来分组 import re a = "123abc456" print re.search ...
    
			
    7. 
						
  7. 201521123112《Java程序设计》第7周学习总结
			
    1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 下面先贴出contains的源代码: public boolean cont ...
    
			
    8. 
						
  8. 201521123095 《Java程序设计》第1周学习总结
			
    1. 本周学习总结     开始了对JAVA的初步了解和学习,了解了如何编写简单的JAVA程序.      了解了Java的诞生及发展以及如何运用JVN JRE JDK      JVM让JAVA可以 ...
    
			
    9. 
						
  9. 201521123045 《Java程序设计》第9周学习总结
			
    201521123045 <Java程序设计>第9周学习总结 1. 本章学习总结 2. 书面作业 本次PTA作业题集异常 1.常用异常题目5-11.1 截图你的提交结果(出现学号) 1.2 ...
    
			
    10. 
						
  10. shell脚本命令，一些你在书上找不到的命令。
			
    1.!$<!$是一个特殊的环境变量,它代表了上一个命令的最后一个字符串.如:你可能会这样: $mkdir mydir$mv mydir yourdir$cd yourdir 可以改成: $mkd ...
    
			
    11.