一、基础知识点

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. 在tomcat7中启用HTTPS的详细配置
			
    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt385 最简单的方法,直接用java里的keytool工具生成一个keysto ...
    
			
    2. 
						
  2. 到处是坑的微信公众号支付开发（java）
			
    之前公司项目开发中支付是用阿里的支付做的,那叫一个简单,随意:悲催的是,现在公司开发了微信公众号,所以我步入了全是坑的微信支付开发中... ------------------------------ ...
    
			
    3. 
						
  3. python怎么导入自定义函数
			
    python 编程中经常需要调用自己定义的函数,在大型程序中自定义的函数一般会和main函数分开,这么主要讲下在不同文件下定义的函数怎么调用: 首先在有文件夹test_python文件夹下有main. ...
    
			
    4. 
						
  4. Spring Boot + Dubbo 可运行的例子源码-实现服务注册和远程调用
			
    最近公司的一个分布式系统想要尝试迁移到Dubbo,项目本身是Spring Boot的,经过一些努力,最终也算是搭建起一个基础的框架了,放到这里记录一下.需要依赖一个外部的zookeeper. 源码地址 ...
    
			
    5. 
						
  5. VMware bridge 桥接方式连接internet
			
    经过反复测试,关于VMware内虚拟机(包括ubuntu linux和windows)连接internet 目前的结论是 使用bridge方式时,VMware相当于一个交换机(switch),虚拟机和 ...
    
			
    6. 
						
  6. cobbler部署安装CentOS6.8
			
    Linux运维:cobbler : 矮哥linux运维群:93324526 学习cobbler的话,必须先搞懂kickstart,原理不是,不懂如何排错. kickstart部署请点击这里 1. Co ...
    
			
    7. 
						
  7. 团队作业8----第二次项目冲刺（Beta阶段） 第三天
			
    BETA阶段冲刺第三天 1.小会议ing 2.每个人的工作 (1) 昨天已完成的工作 注册账号时时添加了账号相同不能添加的功能,以防两个账号一样的情况: 老师账号注册时添加一个密令: (2) 今天计划 ...
    
			
    8. 
						
  8. 201521123109《java程序设计》第二周学习总结
			
    1. 本周学习总结 (1)学习了字符串String的类型,使用Arrays对数组的处理及其相关的应用 (2)学会使用码云 (3)了解了对象与封装 (4)学会查询Java API文件 2. 书面作业 ( ...
    
			
    9. 
						
  9. 201521123017 《Java程序设计》第1周学习总结
			
    1. 本章学习总结 (1)对JAVA的历史发展的了解 (2)JAVA运行环境的搭建和JVM,JDK,JRE的相关的JAVA开发工具的认识及其掌握 (3)写法的不同,开头public class 文件名 ...
    
			
    10. 
						
  10. 201521123019 《Java程序设计》第10周学习总结
			
    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 只有执 ...
    
			
    11.