JS DOM处理小结

 

DOM即文件对象模型（Document Object Model，简称DOM），

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

个人理解：

  （1）其实它就是将 HTML 文档以节点（Node）为单位将其表达为等级明确、节构整齐的树节构，以便于简捷地操作文档的元素。

  （2）它在一定程度上对HTML（或XML）元素（节点）实现了“黑盒”访问和操作。例如，我们获得了一个节点对象，然后直接用它的parentNode属性获得它的父节点（如果父节点存在的话），进而访问或操作父节点对象，而我们无需知道它的父节点是什么类型的对象，它的id是什么等等，父节点就是封装好的一个“黑盒”，我们不知道它的id、name等所有属性，依然可以利用dom技术随意操作它。

 

DOM对节点（Node）的定义：

Ø  整个文档是一个文档节点

Ø  每个 HTML 标签是一个元素节点

Ø  包含在 HTML 元素中的文本是文本节点

Ø  每一个 HTML 属性是一个属性节点

Ø  注释属于注释节点

DOM中节点的层级关系

层级关系很明确也很简单，根据节点之间的关系将其分为三种：父（parent）、子（child）、同胞（sibling）

下图展示节点树中节点之间的关系：

　

DOM节点树示意图：

 

　

 

下面是总节的DOM的基础操作：

 

　

 

（1）引用dom节点

　

 

注：document.getElementById(id)返回的是Node对象的引用而不是Node对象的副本，实例证明：

构造一个一行三列的表格，加脚本前，标签框“测试文字”在第一列下：

 

　

 

加js代码，用appendChild()方法将用getElementById()方法获得的标签框加到第三列下：（从下图中可以看到，此时第一列下的标签框已不存在了，说明document.getElementById(id)返回的是Node对象的引用而不是Node对象的副本）

 

　

（2）获得dom节点信息

 　

 

常用节点类型对应的nodeName值：

（注：nodeName是只读的）

 

对象	返回值
Element.nodeName	元素名称，大写
Attr.nodeName	属性名称，小写
Text.nodeName	#text
Entity.nodeName	实体名称
Comment.nodeName	#comment
Document.nodeName	#document
DocumentType.nodeName	文档类型名称，图HTML

 

nodeType的值与等价的命名常量：（注：IE中Node对象不存在，所有只能使用数字表示nodeType,当然可以自定义函数将两者映射起来，以使用常量）

nodeType值	等价命名常量
1	Node.ELEMENT_NODE
2	Node.ATTRIBUTE_NODE
3	Node.TEXT_NODE
4	Node.CDATA_SECTION_NODE
5	Node.ENTITY_REFERENCE_NODE
6	Node.ENTITY_NODE
7	Node.PROCESSING_INSTRUCTION_NODE
8	Node.COMMENT_NODE
9	Node.DOCUMENT_NODE
10	Node.DOCUMENT_TYPE_NODE
11	Node.DOCUMENT_FRAGMENT_NODE
12	Node.NOTATION_NODE

 

（3）处理属性节点

 　

（4）处理文本节点

　

 

注意:无论是ie还是firefox都容易把空格、换行、制表符等当成文本节点。所有一般通过element.childNodes[i]引用文本节点的时候，一般要处理掉这些字符：

 

<script language"javaScript" type="text/javascript"> 
function cleanWhitespace(element) 
{ 
for(var i=0; i<element.childNotes.length; i++) 
{ 
var node = element.childNodes[i]; 
if(node.nodeType == 3 && !/\S/.test(node.nodeValue)) 
{ 
node.parentNode.removeChild(node); 
} 
} 
} 
</script> 

（5）操作DOM节点树

 　

（6）表格操作

 　

 

总结：

Ø  DOM实际上是以面向对象方式描述的文档模型，可以把DOM认为是页面上数据和结构的一个树形表示。它可以以一种独立于平台和语言的方式访问和修改一个文档（html、xml）的内容和结构。

Ø  Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。