js nextSibling属性和previousSibling属性和NodeType返回类型

最新推荐文章于 2024-01-03 08:30:00 发布

转载最新推荐文章于 2024-01-03 08:30:00 发布 · 1.7k 阅读

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了DOM操作中的nextSibling和previousSibling属性，解释了不同浏览器如何处理这些属性，并探讨了通过这些属性获取HTML元素的方法。

1：nextSibling属性

该属性表示当前节点的下一个节点（其后的节点与当前节点同属一个级别）；如果其后没有与其同级的节点，则返回null。

需要特别注意的是：该属性在不同的浏览器中的执行结果并不都相同，见下面例示：

先来看一个例子：

 
   view plain
   copy to clipboard
   print
   ?
  
 <body>   
 <div>   
 <input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" />   
 <input id="a5" type="button" onclick="alert(this.nextSibling);" value="e" />   
 </div>   
 </bod  

该对象的结构表面上看，div的nextSibling只有2项——两个input节点。但实际上有5项——/n,input,/n,input,/n。这是因为input作为创建各种表单输入控件的标签，无论是生成button、checkbox、radio...等或其他表单控件，IE都会自动在后面创建一个1字节位的空白。

IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取，因此，在ie中用nextSibling便可读取到的下一个节点元素，在FF中就需要这样写：nextSibling.nextSibling了。

opera和safari对nextSibling的处理方式与FF一致

2：previousSibling属性

该属性与nextSibling属性的作用正好相反。例如：someTagObject.nextSibling.previousSibling其实返回的是该标签元素本身，但前提必须是：该标签元素的后面必须有一个同级的元素，否则就返回null了。

3：通过nextSibling或者 previousSibling所获得的HTML标签元素对象的属性问题

一般先通过nextSibling.nodeName来获知其标签名，或者通过nextSibling.nodeType来获知其标签类型，然后，如果该nextSibling.nodeName = #text，则通过nextSibling.nodeValue来获知其文本值；否则，可以通过nextSibling.innerHTML等其他常用标签元素属性来获取其属性。

4、nodeType返回类型

将HTML DOM中几个容易常用的属性做下记录：

nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。
nodeName 属性含有某个节点的名称。

元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

nodeValue
对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

nodeType
nodeType 属性可返回节点的类型。

最重要的节点类型是：

元素类型 ==》节点类型
元素element ==》1
属性attr ==》2
文本text ==》3
注释comments ==》8
文档document ==》 9