一、基础知识点

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. java面向对象（三）之抽象类，接口，向上转型
			
    java类 java类分为普通类和抽象类,接口,上一节我大概讲了java类的一般格式,今天将抽象类和接口.同时讲一下它们是怎样存储的. 最重要的是理解为什么要有抽象和接口,这样学下来你猜不会迷茫,才能 ...
    
			
    2. 
						
  2. SVG视野
			
    前面的话 SVG中坐标系统非常关键,但在介绍坐标系统之前,首先要了解视野.本文将详细介绍SVG视野 视野 下面来区分视窗.世界和视野 [视窗] SVG的属性width.height来控制视窗的大小,也 ...
    
			
    3. 
						
  3. ASP.NET Core 运行原理解剖[4]:进入HttpContext的世界
			
    HttpContext是ASP.NET中的核心对象,每一个请求都会创建一个对应的HttpContext对象,我们的应用程序便是通过HttpContext对象来获取请求信息,最终生成响应,写回到Http ...
    
			
    4. 
						
  4. PHP发送邮件功能--ThinkPHP3.2.3
			
    首先第一步   :在网上down了一个PHPMailer插件,插件地址>https://github.com/PHPMailer/PHPMailer下载解压后,这里我们只需要用到其中两个文件,如 ...
    
			
    5. 
						
  5. [译] 反思 1 号进程 / Rethinking PID 1
			
    By Lennart Poettering 译 SReadFox 原文链接:http://0pointer.de/blog/projects/systemd.html 译注:笔者大约在 2011 年读 ...
    
			
    6. 
						
  6. 3.修改第一个程序来点亮LED
			
    在上一节中已经将驱动程序框架搭建好了 接下来开始写硬件的操作(控制LED): (1)看原理图,确定引脚 (2)看2440手册 (3)写代码(需要使用ioremap()函数映射虚拟地址,在linux中只 ...
    
			
    7. 
						
  7. jsp---jstl配置
			
    关于eclipse中jstl标准标签库的配置问题 我的eclipse的版本是:Version: Neon.3 Release (4.6.3) 用的1.8.0_121的jre,Tomcat用的9.0,  ...
    
			
    8. 
						
  8. 原生的AJAX
			
    var XHR=null; if (window.XMLHttpRequest) { // 非IE内核 XHR = new XMLHttpRequest(); } else if (window.Ac ...
    
			
    9. 
						
  9. CentOS 6.5安装部署Zabbix监控系统
			
    CentOS 6.5安装部署Zabbix监控系统 先说一点废话,我没有用centos7做实验,讲真,centos 7我也不常用,喜欢新版本的同学其实可以尝试下,注意一点的就是centos 6.5只支持 ...
    
			
    10. 
						
  10. 201521123084 《Java程序设计》第4周学习总结
			
    第4周作业-面向对象设计与继承 1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 总结: (1)学会了如何给类和方法进行简单的注释: (2)学 ...
    
			
    11.