DOM节点类型说明

最新推荐文章于 2025-04-03 21:47:02 发布

转载最新推荐文章于 2025-04-03 21:47:02 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/praise/blog/93116

本文详细介绍了HTML DOM标准中的各类节点类型及其值，并对比了IE与Firefox浏览器在处理这些节点上的差异。同时提供了获取特定类型节点的JavaScript实用方法。

为什么80%的码农都做不了架构师？>>>

万维网联盟（W3C）定义HTML DOM 标准节点有以下几种 ()

<table> <tr> <td>类型</td><td>值</td><td>说明</td> </tr> <tr> <td>ELEMENT_NODE</td><td>1</td><td>元素节点</td><td>*</td> </tr> <tr> <td>ATTRIBUTE_NODE</td><td>2</td><td>属性节点</td><td>*</td> </tr> <tr> <td>TEXT_NODE</td><td>3</td><td>文本节点</td><td>*</td> </tr> <tr> <td>CDATA_SECTION_NODE</td><td>4</td><td>CDATA 区段</td> </tr> <tr> <td>ENTITY_REFERENCE_NODE</td><td>5</td><td>实体引用</td> </tr> <tr> <td>ENTITY_NODE</td><td>6</td><td>实体</td> </tr> <tr> <td>PROCESSING_INSTRUCTION_NODE</td><td>7</td><td>处理指令</td> </tr> <tr> <td>COMMENT_NODE</td><td>8</td><td>注释节点</td><td>*</td> </tr> <tr> <td>DOCUMENT_NODE</td><td>9</td><td>文档节点</td><td>*</td> </tr> </table>

注: * 表示常用

IE与FF 对以上节点的 "理解" 有差异,如比我们写js : 对象.nextSibling , 来取得对象的下一个兄弟节点,
在IE中,只会取ELEMENT_NODE (元素节点), 忽略其它类型节点.
FF会取得上面各种类型节点. 如:

<!-- lang: html -->
<table>  
　　<tr  id="nst"><td></td></tr>(这里有换行,就是一个文本节点)  
　　<tr><td></td></tr>  
</table>

<!-- lang: js -->
var o=$('nst');  
var next=o.nextSibling;

结果:
IE中:next 是元素节点 (第二个<tr>)
FF中:next 是文本节点 (那个换行)
解决办法: 在base.js中有如下方法: 通过判断 nodeType == 1 来解决问题

<!-- lang: js -->
// 获得下一个元素对象(nodeType=1)
function $NE(e)
{
	e = e.nextSibling;
	while (e && e.nodeType != 1){e = e.nextSibling;}
	return e;
}
// 获得第一个元素对象(nodeType=1)
function $FE(e)
{
	e = e.firstChild;
	while (e && e.nodeType != 1){e = e.nextSibling;}
	return e;
}

转载于:https://my.oschina.net/praise/blog/93116