一、基础知识点

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. javaScript手记（01）
			
    --------------------javaScript基础1.嵌入页面的方式 1.行间事件(主要用于事件): <input type="button" name=&qu ...
    
			
    2. 
						
  2. jQuery对象和DOM对象和字符串之间的转化
			
    jQuery对象和DOM对象和字符串之间的转化 字符串---------->jQuery对象 $(HTML字符串): $('<div>我是祖国的一朵小花</div>')  ...
    
			
    3. 
						
  3. Myeclipse 自定义java代码快捷键
			
    1.首先在MyEclipse菜单栏找到"windows"下拉菜单中找到首选项(英文Prefenerces),弹出首选项界面.   2.打开java -->editor---& ...
    
			
    4. 
						
  4. spring配置datasource三种方式
			
    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp34 spring配置datasource三种方式 1.使用org.spri ...
    
			
    5. 
						
  5. 工作常用git命令
			
    克隆项目 git clone gitssh地址 提交前的准备 git config user.name 您的中文名 git config user.email 公司邮箱 获取分支 #### 将远端分支 ...
    
			
    6. 
						
  6. PCB Design_经验之谈
			
    所谓覆铜,就是将PCB上闲置的空间作为基准面,然后用固体铜填充,这些铜区又称为灌铜.敷铜的意义在于,减小地线阻抗,提高抗干扰能力:降低压降,提高电源效率:与地线相连,还可以减小环路面积.也出于让PCB ...
    
			
    7. 
						
  7. Java-错误处理机制学习（一）异常处理
			
    注意:本文介绍Java中的异常处理理论知识及相关语法结构,对于实际应用来说是万万不够的.关于如何高效地使用异常,请查看Java-高效地使用Exception-实践. 异常处理的思想是,当应用程序处于异 ...
    
			
    8. 
						
  8. 201521123018 《Java程序设计》第11周学习总结
			
    1. 本章学习总结 你对于本章知识的学习总结 2. 书面作业 一.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问, ...
    
			
    9. 
						
  9. 201521123087《Java程序设计》第14周学习总结
			
    1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名)在自己建立的数据库上执行常见SQL语句(截图)-参考 ...
    
			
    10. 
						
  10. HTML结构
			
    HTML:超文本标记语言. 可以放除了文本之外的内容,像图片.音频.视频等 由很多标签组成 html基本结构: <html> <head> 头标签存放网页信息,编码格式等 &l ...
    
			
    11.