最近评论
正在载入评论列表...
4.1.1 DOM中相关属性和方法
在表4-1中列出了DOM中常用的几种结点类型。
表4-1 常用的几种结点类型
|
接 口 |
nodeType常量 |
nodeType值 |
备 注 |
|
element |
Node.ELEMENT_NODE |
1 |
元素结点 |
|
text |
Node.TEXT_NODE |
3 |
文本结点 |
|
document |
Node.DOCUMENT_NODE |
9 |
document |
|
comment |
Node.COMMENT_NODE |
8 |
注释的文本 |
|
documentFragment |
Node.DOCUMENT_FRAGMENT_NODE |
11 |
document片断 |
|
attr |
Node.ATTRIBUTE_NODE |
2 |
结点属性 |
在DOM的树型结构中，其根结点是document对象，该对象的documentElement属性引用表示文档根元素的element对象（对于HTML文档，实际上就是<html>标记）。当使用JavaScript脚本语言操作HTML文档的时，document即指向整个文档，<body>、<table>等结点类型即为element，comment类型的结点则是指文档的注释。
在使用DOM操作HTML文档时，经常使用document对象的相关方法，有关该对象的常用方法如表4-2所示。
表4-2 document对象的常用方法
|
方 法 |
描 述 |
|
createAttribute() |
用指定的名字创建新的attr结点，即属性结点 |
|
createComment() |
用指定的字符串创建新的comment结点 |
|
createElement() |
用指定的标记名创建新的element结点 |
续表
|
方 法 |
描 述 |
|
createTextNode() |
用指定的文本创建新的textNode结点 |
|
getElementById() |
返回文档中具有指定id属性的element结点 |
|
getElementsByTagName() |
返回文档中具有指定标记名的所有element结点 |
除了document对象对应的属性及方法比较常用之外，对于element结点，可以通过调用getAttribute()、setAttribute()、removeAttribute()方法来查询、设置或者删除一个element结点的相关属性，例如<table>标记的border属性。
element对象常用的属性是tagName 元素，其含义为该对象对应的标记名称，比如<p>元素为P，注意HTML文档返回的tagName均为大写。
表4-3中列出了element对象的常用方法。
表4-3 element对象的常用方法
|
方 法 |
描 述 |
|
getAttribute() |
以字符串形式返回指定属性的值 |
|
getAttributeNode() |
以attr结点的形式返回指定属性的值 |
|
getElementsByTabName() |
返回一个Node数组，包含具有指定标记名的所有element结点的子孙结点，其顺序为在文档中出现的顺序 |
|
hasAttribute() |
如果该元素具有指定名字的属性，则返回true |
|
removeAttribute() |
从元素中删除指定的属性 |
|
removeAttributeNode() |
从元素的属性列表中删除指定的attr结点 |
|
setAttribute() |
把指定的属性设置为指定的字符串值，如果该属性不存在则添加一个新属性 |
|
setAttributeNode() |
把指定的attr结点添加到该元素的属性列表中 |
attr对象代表文档元素的属性，有name、value等属性，可以通过Node接口的attributes属性或者调用element接口的getAttributeNode()方法来获取。不过，在大多数情况下，使用element元素有关属性操作的最简单方法是getAttribute()和setAttribute()两个方法，而不是attr对象。
node对象定义了一系列属性和方法，以便于遍历整个文档。用parentNode属性和childNodes[]数组可以在文档树中上下移动；通过遍历childNodes[]数组或者使用firstChild和nextSibling属性进行循环操作，也可以使用lastChild和previousSibling进行逆向循环操作，还可以根据需要枚举指定结点的子结点。而调用appendChild()、insertBefore()、removeChild()、replaceChild()方法可以改变一个结点的子结点从而改变文档树。
需要注意的是，childNodes[]的值实际上是一个NodeList对象。因此，可以通过遍历childNodes[]数组的每个元素，来枚举一个给定结点的所有子结点；通过递归，可以枚举树中所有结点。
表4-4中列出了node对象的一些常用属性。
表4-4 node对象的常用属性
|
属 性 |
描 述 |
|
attributes |
如果该结点是一个element，则以NamedNodeMap形式返回该元素的属性 |
|
childNodes |
以node[]的形式存放当前结点的子结点。如果没有子结点，则返回空数组 |
|
firstChild |
以node的形式返回当前结点的第一个子结点。如果没有子结点，则为null |
|
lastChild |
以node的形式返回当前结点的最后一个子结点。如果没有子结点，则为null |
|
nextSibling |
以node的形式返回当前结点的兄弟下一个结点。如果没有这样的结点，则返回null |
|
nodeName |
结点的名字，element结点则代表element的标记名称 |
|
nodeType |
代表结点的类型 |
|
setAttributeNode() |
把指定的attr结点添加到该元素的属性列表中 |
|
parentNode |
以node的形式返回当前结点的父结点。如果没有父结点，则为null |
|
previousSibling |
以node的形式返回紧挨当前结点、位于它之前的兄弟结点。如果没有这样的结点，则返回null |
在使用DOM操作HTML文档时，会使用node对象的相关方法，通过这些方法实现对指定结点的具体操作。
有关node对象中常用的方法如表4-5所示。
表4-5 node对象的常用方法
|
方 法 |
描 述 |
|
appendChild() |
通过把一个结点增加到当前结点的childNodes[]组，给文档树增加结点 |
|
cloneNode() |
复制当前结点，或者复制当前结点以及它的所有子孙结点 |
|
hasChildNodes() |
如果当前结点拥有子结点，则将返回true |
|
insertBefore() |
给文档树插入一个结点，位置在当前结点的指定子结点之前。如果该结点已经存在，则删除之再插入到它的位置 |
|
removeChild() |
从文档树中删除并返回指定的子结点 |
|
replaceChild() |
从文档树中删除并返回指定的子结点，用另一个结点替换它 |
了解了DOM中针对HTML文档操作提供的相关对象及对应的属性和方法后，通过两个实际的案例帮助读者体会有关DOM操作HTML文档的方法和技巧。
必知必会：innerHTML属性
使用HTML DOM对象的innerHTML属性实现信息的动态显示，也可以使用DOM提供的操作HTML文档相关方法和属性实现更加丰富的显示效果。
图书导读
