DOM大全

sunburst

浏览: 14811 次
性别:
来自: 广州

最近访客更多访客>>

jklwan

chm69feng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript HTML Web 编程 J#

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 所示的错误。

分享到：