作者: ecsun 链接: http://papalong.javaeye.com/blog/277969 发表时间: 2008年11月25日
声明:本文系JavaEye网站发布的原创博客文章,未经作者书面许可,严禁任何网站转载本文,否则必将追究法律责任!
childNodes 返回当前元素所有子元素的数组
firstChild 返回当前元素的第一个下级子元素
lastChild 返回当前元素的最后一个子元素
nextChild 返回紧跟在当前元素后面的元素
nextSibling 指定表示元素值的读/写属性
nodeValue 返回元素的父节点
parentNode 返回元素的父
previousSibling 返回紧邻当前元素之前的元素
方法名
描述
getElementById(id)(document) 获取有指定惟一ID属性值文档中的元素
getElementByTagName(name) 返回当前元素中有指定标记名的子元素的数组
hasChildNodes() 返回一个布尔值,指示元素是否有子元素
getAttribute(name) 返回元素的属性值,属性由name指定
DOM对象的类型、属性和方法
节点的属性
使用 DOM 节点时需要一些属性和方法,因此我们首先来讨论节点的属性和方法。DOM 节点的属性主要有:
nodeName报告节点的名称(详见下述)。
nodeValue提供节点的 “值”(详见后述)。
parentNode返回节点的父节点。记住,每个元素、属性和文本都有一个父节点。
childNodes是节点的孩子节点列表。对于 HTML,该列表仅对元素有意义,文本节点和属性节点都没有孩子。
firstChild仅仅是childNodes列表中第一个节点的快捷方式。
lastChild是另一种快捷方式,表示childNodes列表中的最后一个节点。
previousSibling返回当前节点之前的节点。换句话说,它返回当前节点的父节点的childNodes列表中位于该节点前面的那个节点(如果感到迷惑,重新读前面一句)。
nextSibling类似于previousSibling属性,返回父节点的childNodes列表中的下一个节点。
attributes仅用于元素节点,返回元素的属性列表。
其他少数几种属性实际上仅用于更一般的 XML 文档,在处理基于 HTML 的网页时没有多少用处。
不常用的属性
上述大部分属性的意义都很明确,除了nodeName和nodeValue属性以外。我们不是简单地解释这两个属性,而是提出两个奇怪的问题:文本节点的nodeName应该是什么?类似地,元素的nodeValue应该是什么?
如果这些问题难住了您,那么您就已经了解了这些属性固有的含糊性。nodeName和nodeValue实际上并非适用于所有节点类型(节点的其他少数几个属性也是如此)。这就说明了一个重要概念:任何这些属性都可能返回空值(有时候在 JavaScript 中称为 “未定义”)。比方说,文本节点的nodeName属性是空值(或者在一些浏览器中称为 “未定义”),因为文本节点没有名称。如您所料,nodeValue返回节点的文本。
类似地,元素有nodeName,即元素名,但元素的nodeValue属性值总是空。属性同时具有nodeName和nodeValue。下一节我还将讨论这些单独的类型,但是因为这些属性是每个节点的一部分,因此在这里有必要提一提。
节点方法
接下来看看所有节点都具有的方法(与节点属性一样,我省略了实际上不适用于多数 HTML DOM 操作的少数方法):
insertBefore(newChild, referenceNode)将newChild节点插入到referenceNode之前。记住,应该对newChild的目标父节点调用该方法。
replaceChild(newChild, oldChild)用newChild节点替换oldChild节点。
removeChild(oldChild)从运行该方法的节点中删除oldChild节点。
appendChild(newChild)将newChild添加到运行该函数的节点之中。newChild被添加到目标节点孩子列表中的末端。
hasChildNodes()在调用该方法的节点有孩子时则返回 true,否则返回 false。
hasAttributes()在调用该方法的节点有属性时则返回 true,否则返回 false。
注意,大部分情况下所有这些方法处理的都是节点的孩子。这是它们的主要用途。如果仅仅想获取文本节点值或者元素名,则不需要调用这些方法,使用节点属性就可以了。
通用节点类型
现在已经介绍了 DOM 节点的一些特性和属性(以及一些奇特的地方),下面开始讲述您将用到的一些特殊节点类型。多数 Web 应用程序中只用到四种节点类型:
文档节点表示整个 HTML 文档。
元素节点表示 HTML 元素,如a或img。
属性节点表示 HTML 元素的属性,如href(a元素)或src(img元素)。
文本节点表示 HTML 文档中的文本,如 “Click on the link below for a complete set list”。这是出现在p、a或h2这些元素中的文字。
处理 HTML 时,95% 的时间是跟这些节点类型打交道。因此本文的其余部分将详细讨论这些节点。(将来讨论 XML 的时候将介绍其他一些节点类型。)
文档节点
基本上所有基于 DOM 的代码中都要用到的第一个节点类型是文档节点。文档节点实际上并不是 HTML(或 XML)页面中的一个元素而是页面本身。因此在 HTML Web 页面中,文档节点就是整个 DOM 树。在 JavaScript 中,可以使用关键字document访问文档节点:
// These first two lines get the DOM tree for the current Web page,
// and then the <html> element for that DOM tree
var myDocument = document;
var htmlElement = myDocument.documentElement;
JavaScript 中的document关键字返回当前网页的 DOM 树。从这里可以开始处理树中的所有节点。
也可使用document对象创建新节点,如下所示:
createElement(elementName)使用给定的名称创建一个元素。
createTextNode(text)使用提供的文本创建一个新的文本节点。
createAttribute(attributeName)用提供的名称创建一个新属性。
这里的关键在于这些方法创建节点,但是并没有将其附加或者插入到特定的文档中。因此,必须使用前面所述的方法如insertBefore()或appendChild()来完成这一步。因此,可使用下面的代码创建新元素并将其添加到文档中:
var pElement = myDocument.createElement("p");
var text = myDocument.createTextNode("Here's some text in a p element.");
pElement.appendChild(text);
bodyElement.appendChild(pElement);
一旦使用document元素获得对 Web 页面 DOM 树的访问,就可以直接使用元素、属性和文本了。
元素节点
虽然会大量使用元素节点,但很多需要对元素执行的操作都是所有节点共有的方法和属性,而不是元素特有的方法和属性。元素只有两组专有的方法:
与属性处理有关的方法:
getAttribute(name)返回名为name的属性值。
removeAttribute(name)删除名为name的属性。
setAttribute(name, value)创建一个名为name的属性并将其值设为value。
getAttributeNode(name)返回名为name的属性节点(属性节点在 下一节 介绍)。
removeAttributeNode(node)删除与指定节点匹配的属性节点。
与查找嵌套元素有关的方法:
getElementsByTagName(elementName)返回具有指定名称的元素节点列表。
这些方法意义都很清楚,但还是来看几个例子吧。
处理属性
处理元素很简单,比如可用document对象和上述方法创建一个新的img元素:
var imgElement = document.createElement("img");
imgElement.setAttribute("src", "http://www.headfirstlabs.com/Images/hraj_cover-150.jpg");
imgElement.setAttribute("width", "130");
imgElement.setAttribute("height", "150");
bodyElement.appendChild(imgElement);
现在看起来应该非常简单了。实际上,只要理解了节点的概念并知道有哪些方法可用,就会发现在 Web 页面和 JavaScript 代码中处理 DOM 非常简单。在上述代码中,JavaScript 创建了一个新的img元素,设置了一些属性然后添加到 HTML 页面的 body 元素中。
查找嵌套元素
发现嵌套的元素很容易。比如,下面的代码用于发现和删除 清单 3 所示 HTML 页面中的所有img元素:
// Remove all the top-level <img> elements in the body
if (bodyElement.hasChildNodes()) {
for (i=0; i<bodyElement.childNodes.length; i++) {
var currentNode = bodyElement.childNodes[i];
if (currentNode.nodeName.toLowerCase() == "img") {
bodyElement.removeChild(currentNode);
}
}
}
也可以使用getElementsByTagName()完成类似的功能:
// Remove all the top-level <img> elements in the body
var imgElements = bodyElement.getElementsByTagName("img");
for (i=0; i<imgElements.length; i++) {
var imgElement = imgElements.item[i];
bodyElement.removeChild(imgElement);
}
回页首
属性节点
DOM 将属性表示成节点,可以通过元素的attributes来访问元素的属性,如下所示:
// Remove all the top-level <img> elements in the body
var imgElements = bodyElement.getElementsByTagName("img");
for (i=0; i<imgElements.length; i++) {
var imgElement = imgElements.item[i];
// Print out some information about this element
var msg = "Found an img element!";
var atts = imgElement.attributes;
for (j=0; j<atts.length; j++) {
var att = atts.item(j);
msg = msg + ""n " + att.nodeName + ": '" + att.nodeValue + "'";
}
alert(msg);
bodyElement.removeChild(imgElement);
}
属性的奇特之处
对于 DOM 来说属性有一些特殊的地方。一方面,属性实际上并不像其他元素或文本那样是元素的孩子,换句话说,属性并不出现在元素 “之下”。同时,属性显然和元素有一定的关系,元素 “拥有” 属性。DOM 使用节点表示属性,并允许通过元素的专门列表来访问属性。因此属性是 DOM 树的一部分,但通常不出现在树中。有理由说,属性和 DOM 树结构其他部分之间的关系有点模糊。
需要指出的是,attributes属性实际上是对节点类型而非局限于元素类型来说的。有点古怪,不影响您编写代码,但是仍然有必要知道这一点。
虽然也能使用属性节点,但通常使用元素类的方法处理属性更简单。其中包括:
getAttribute(name)返回名为name的属性值。
removeAttribute(name)删除名为name的属性。
setAttribute(name, value)创建一个名为name的属性并将其值设为value。
这三个方法不需要直接处理属性节点。但允许使用简单的字符串属性设置和删除属性及其值。
文本节点
需要考虑的最后一种节点是文本节点(至少在处理 HTML DOM 树的时候如此)。基本上通常用于处理文本节点的所有属性都属于节点对象。实际上,一般使用nodeValue属性来访问文本节点的文本,如下所示:
var pElements = bodyElement.getElementsByTagName("p");
for (i=0; i<pElements.length; i++) {
var pElement = pElements.item(i);
var text = pElement.firstChild.nodeValue;
alert(text);
}
少数其他几种方法是专门用于文本节点的。这些方法用于增加或分解节点中的数据:
appendData(text)将提供的文本追加到文本节点的已有内容之后。
insertData(position, text)允许在文本节点的中间插入数据。在指定的位置插入提供的文本。
replaceData(position, length, text)从指定位置开始删除指定长度的字符,用提供的文本代替删除的文本。
回页首
什么节点类型?
到目前为止看到的多数代码都假设已经知道处理的节点是什么类型,但情况并非总是如此。比方说,如果在 DOM 树中导航并处理一般的节点类型,可能就不知道您遇到了元素还是文本。也许获得了p元素的所有孩子,但是不能确定处理的是文本、b元素还是img元素。这种情况下,在进一步的处理之前需要确定是什么类型的节点。
所幸的是很容易就能做到。DOM 节点类型定义了一些常量,比如:
Node.ELEMENT_NODE是表示元素节点类型的常量。
Node.ATTRIBUTE_NODE是表示属性节点类型的常量。
Node.TEXT_NODE是表示文本节点类型的常量。
Node.DOCUMENT_NODE是表示文档节点类型的常量。
还有其他一些节点类型,但是对于 HTML 除了这四种以外很少用到。我有意没有给出这些常量的值,虽然 DOM 规范中定义了这些值,永远不要直接使用那些值,因为这正是常量的目的!
nodeType 属性
可使用nodeType属性比较节点和上述常量 —— 该属性定义在 DOM node 类型上因此可用于所有节点,如下所示:
var someNode = document.documentElement.firstChild;
if (someNode.nodeType == Node.ELEMENT_NODE) {
alert("We've found an element node named " + someNode.nodeName);
} else if (someNode.nodeType == Node.TEXT_NODE) {
alert("It's a text node; the text is " + someNode.nodeValue);
} else if (someNode.nodeType == Node.ATTRIBUTE_NODE) {
alert("It's an attribute named " + someNode.nodeName
+ " with a value of '" + someNode.nodeValue + "'");
}
这个例子非常简单,但说明了一个大问题:得到节点的类型非常简单。更有挑战性的是知道节点的类型之后确定能做什么,只要掌握了节点、文本、属性和元素类型提供了什么属性和方法,就可以自己进行 DOM 编程了。
实践中的挫折
nodeType属性似乎是使用节点的一个入场卷 —— 允许确定要处理的节点类型然后编写处理该节点的代码。问题在于上述Node常量定义不能正确地用于 Internet Explorer。因此如果在代码中使用Node.ELEMENT_NODE、Node.TEXT_NODE或其他任何常量,Internet Explorer 都将返回如 图 4 所示的错误。
已有 0 人发表留言,猛击->>这里<<-参与讨论
JavaEye推荐
文章来源: http://papalong.javaeye.com/blog/277969