JavaScript DOM学习第一章 W3C DOM简介

W3C DOM Level 1 概述

本章主要介绍被现代浏览器广泛支持的W3C Level 1 DOM规范。我们将对其工作原理进行概览，并明确你可以利用它实现的功能。

首先介绍DOM的设计建议与核心目标，随后解释节点（Nodes）的概念以及如何通过DOM树遍历节点。接着讲解如何定位特定节点，修改其值与属性，最后探讨DOM的核心功能：创建自定义新节点。

建议

Level 1 DOM由W3C制定，旨在为任何编程语言提供访问XML文档的标准接口。无论使用何种语言处理XML，只要遵循Level 1 DOM规范，即可调用相应的方法与属性。无论是Perl、VBScript还是JavaScript，均可读取并修改任意所需的值。

这种描述属于理想状态，实际应用中仍存在差异（例如不同浏览器的实现）。尽管内容相对基础，但掌握JavaScript中的XML处理方式，对你学习其他语言处理XML也有助益。

从某种程度上讲，HTML也可视为一种XML文档。只要浏览器支持相应的脚本执行，Level 1 DOM在HTML环境中同样能良好运行。

你可以读取每个HTML标签的文本内容与属性，删除标签及其内容，甚至无需修改服务器端文件，即可在现有文档中实时插入新标签。

由于设计初衷需兼顾XML修改的方方面面，部分方法对普通网页工程师而言可能极少使用。例如，你可以修改HTML注释，但此举的实际意义不大。同样，处理DTD/Doctype的内容在网页设计中通常无需涉及，因此建议忽略这些部分，专注于日常开发需求。

节点（Nodes）与DOM树结构

节点（Nodes）

文档对象模型（DOM）是一种描述文档内多个元素之间相互关系的模型。在Level 1 DOM中，每个对象均被视为一个节点。例如，如果你编写如下代码：

<p>This is a paragraph</p>

则创建了两个节点：元素P节点，以及内容为“This is a paragraph”的文本节点。该文本节点包含在P元素内部，因此可视为P节点的子节点。反之，P元素则是文本节点的父节点。

若代码结构如下：

<p>This is a <B>Paragraph</B></p>

则元素节点P拥有两个子节点，其中其中一个子节点（B标签）还包含自己的子节点。

最后是属性节点（令人困惑的是，它们不被视为元素节点的子节点。事实上，在撰写本章时进行的测试显示，IE5甚至不将属性节点视为元素的子节点）。因此：

 
<P ALIGN="right">This is a <B>paragraph</B></P>

其结构可能呈现为：

       <P> ----------------

     --------------     ALIGN

  This is a     <B>     |
            |    right

          paragraph

这涵盖了元素节点、文本节点和属性节点。99%的HTML页面由这三类节点组成，你的主要任务便是如何合理放置它们。当然还存在其他类型的节点，此处暂且略过。

正如你所知，P元素也有其父节点，通常是document，有时也可能是DIV。因此，整个文档可视为由众多节点组成的树状结构，且大多数节点都拥有自己的子节点。

      <BODY>

        |-------------------------------------

       <P> ----------------      lots more nodes

     --------------     ALIGN

  This is a     <B>     |
            |    right

          paragraph

遍历DOM树的方法

遍历DOM树

了解DOM树结构后，即可遍历以查找目标元素。例如，假设元素节点P已存储在变量x中（稍后介绍具体实现方式）。若需访问BODY元素，可执行：

x.parentNode

由此获取x的父元素，进而进行修改。若要访问B节点，可执行：

x.childNode[1]

childNodes是一个包含x所有子节点的数组。注意数组索引从0开始，因此childNodes[0]对应文本节点“This is a ”，而childNodes[1]对应B节点。

两个特殊属性：x.firstChild表示x的第一个子节点；x.lastChild表示x的最后一个子节点。

假设P是BODY的第一个子节点，而BODY又是document的第一个子节点，那么要访问B节点，可使用以下任意方法：

 
document.firstChild.firstChild.lastChild;
document.firstChild.childNodes[0].lastChild;
document.firstChild.childNodes[0].childNodes[1];

甚至可以使用这种较为繁琐的方式：

document.firstChild.childNodes[0].parentNode.firstChild.childNodes[1];

获取与定位元素

获取元素

然而，直接遍历文档过于繁琐。由于Level 1 DOM的设计目标是允许修改整个DOM树，你必须准确掌握DOM树的结构，这很快会导致问题。

因此，存在一些方法可以快速定位目标元素。一旦定位成功，即可遍历整个DOM树的每个节点。

继续前述示例。若要访问B元素，最简单的方法是直接跳转。通过document.getElementsByTagName()可快速创建包含文档内所有B标签的数组。假设我们的B标签是第一个，则可简单编写：

var x = document.getElementsByTagName('B')[0]

此时x包含元素节点B。首先命令浏览器获取文档内所有B元素（document.getElementsByTagName('B')），然后选择数组中的第一个元素（[0]），从而获得目标。

你也可以编写：

var x = document.getElementsByTagName('P')[0].lastChild;

此处先定位文档的第一个段落P（假设P是第一个元素），然后访问P的最后一个子元素。

最准确且无需了解DOM结构即可定位元素的办法，是为B元素指定ID：

<P ALIGN="right">This is a <B ID="hereweare">paragraph</B></P>现在你可以简单编写：

var x = document.getElementById('hereweare');

元素B便存储在变量x中。

修改节点内容与属性

修改一个节点

定位节点后，即可进行修改。假设需将加粗文字部分修改为'bold bit of text'。我们需要访问正确的元素并修改其nodeValue。注意，正确的目标并非B元素本身，而是其子节点文本节点：我们要改变的是文字内容，而非元素标签。因此可编写：

document.getElementById('hereweare').firstChild.nodeValue='bold bit of text';

元素内容随即改变。

你可通过nodeValue修改任何文本节点或属性。例如，可修改段落的ALIGN属性。这同样简单，先找到目标元素（本例中为B元素的父元素），然后使用setAttribute()方法设置所需值：

function test2(val) {
if (document.getElementById && document.createElement)
{ 
node = document.getElementById('hereweare').parentNode;
node.setAttribute('align',val);
} 
else alert('Your browser doesn\'t support the Level 1 DOM');
} 

创建与删除元素

创建和删除元素

修改元素固然有用，但创建所需元素并插入现有文档更为实用。我可以轻松在此段落后添加一个HR元素，并同样轻松地将其删除。

创建元素使用以下方法：

var x=document.createElemnt(‘HR')

此时HR元素已创建并存储在x中。第二步是将x插入文档。我设定了一个ID为inserthere的SPAN，便将其插入此处。因此使用appendChild()方法：

document.getElementById('inserthrhere').appendChild(x);

删除操作稍显复杂。我先创建一个临时变量node存储SPAN，然后指示其移除第一个子元素：

 
var node=document.getElementById(‘inserthere');
node.removeChild(node.childNode[0]);

使用相同方法，我们也可创建新元素并添加至ID为hereweare的B元素上。

 
var x = document.createTextNode(' A new text node has been appended!');
document.getElementById('hereweare').appendChild(x);

你可以尝试操作，会发现使用旧方法可能无法移除新添加的文本，因为它们已成为分离的两部分：

 <B>

 ------------

 paragraph A new text node
 has been appended!

(可通过normalize()将它们合并，但IE5不支持此功能）

我不打算演示如何移除它，自行练习会更有收获。

翻译地址：http://www.quirksmode.org/dom/intro.html

转载请保留以下信息

作者：北玉(tw:@rehawk)