和

任何一个DOM节点都可以分配一个ID，用来在程序中通过一个函数调用获得这个节点的引用，无论它在文档中的什么位置：

var hello=document.getElementById('hello');

注意，这是Document对象的一个方法。在一个如上所述的简单情况中（以及在很多复杂的情况中），可以通过document访问当前的Document对象。如果你使用了IFrame（我们将会在后面讨论），那么可能需要跟踪多个Document对象，并确定正在查询的是哪个Document对象。

在一些情况下，我们确实需要一步一步地搜索DOM树。因为DOM节点是以树形结构来组织的，每一个DOM节点都只有不多于一个的父节点，但是可以有任意多个子节点。可以通过parentNode和childNodes来访问它们。parentNode返回另外一个DOM节点，而childNodes返回一个JavaScript节点数组，可以对其遍历，即：

var children=empty.childNodes;

for (var i=0;i

  ...

}

即便在文档中的某个节点上没有附加唯一ID，我们仍有第三种方法可以方便地定位节点。那就是，使用getElementsByTagName()方法，基于HTML标签的类型搜索DOM节点。例如，document.getElementsByTagName("UL")会返回一个包含文档中所有

标签的数组。

这些方法对于操作那些我们几乎无法控制的文档[2]来说是很有用的。作为通常的规则，使用getElementById()要比使用getElementsByTagName()更加安全，因为前者对于文档结构和顺序的假设更少一些，这样文档结构可以独立于代码而变化。

2.4.3  创建DOM节点

除了重组已有的DOM节点，一些情况下还需要创建新的节点并把它们添加到文档中（例如，在运行时创建消息框）。DOM的JavaScript实现也为我们提供了相应的方法。

我们再次考察一下代码清单2-5的例子代码。ID为'empty'的DOM节点实际上是从空节点开始的。当加载这个页面的时候，我们为它动态创建了一些内容。addNode()函数使用了标准的document.createElement()和document.createTextNode()方法。createElement()可以用来创建任何HTML元素，带有一个标签类型参数，例如：

var childEl=document.createElement("div");

createTextNode()创建了一个代表一段文本的DOM节点，这样的节点通常嵌入在标题、div、段落以及列表条目等标签之中。

var txtNode=document.createTextNode("some text");

DOM标准将文本节点和代表HTML元素的节点区别开来，分别对待。不能直接对文本节点应用样式，因此也就少占用一些内存。不过，我们仍然可以通过包含这个文本节点的DOM元素来设置该节点所表示的文本的样式。

无论何种类型的节点一旦被创建，都必须将它附加到文档之上，然后才能在浏览器窗口中见到它。DOM节点的appendChild()方法就是用来完成这个工作的：

el.appendChild(childEl);

createElement()、createTextNode()和appendChild()这三个方法为我们提供了向一个文档中添加新的结构所需要的一切。完成了这个工作，我们通常还想要以一种适当的方式为新的结构设置样式。我们来考察一下如何做这件事。

2.4.4  为文档增加样式

到目前为止，我们已经考察了使用DOM来操作文档的结构（一个元素如何被另外一个元素所包含，诸如此类）。这使得我们可以有效地改造在静态HTML中声明的结构。DOM还提供了另外一类方法，允许以编程方式修改元素的样式和改造定义在样式表中的结构。

通过DOM操作，Web页面上的每一个元素都可以拥有多种视觉样式，例如位置、高度和宽度、颜色、边框和空白。尽管分别修改每一个属性可以更加精细地控制元素的外观，但是这样做是很单调乏味的。幸运的是，Web浏览器为我们所提供的JavaScript绑定除了提供底层接口以便精确操作之外，也允许通过CSS类来为元素设置一致的样式。我们来逐个考察一下。

1. className属性

CSS提供了一种简明的方式来将预先定义的、可重用的样式应用到文档中。当我们为在代码中创建的元素设置样式的时候，也可以通过设置DOM节点的className属性来利用CSS。例如，下面一行为一个节点设置了通过declared类定义的显示规则：

hello.className='declared';

其中hello是到一个DOM节点的引用。这提供了一种容易和紧凑的方法，来为一个节点同时分配很多的CSS规则，并且可以通过样式表来管理复杂的样式。

2. style属性

在其他一些情况下，我们想要细粒度地改变特定元素的样式，也许仅仅是作为已经通过CSS应用的样式的补充。

DOM节点还包含了一个名为style的关联数组，其中包含了节点样式的全部细节。正如图2-4所示，DOM节点的样式中通常包含有大量的条目。鲜为人知的是，为节点分配className也会改变style数组的值。



图2-4  在DOM检查器中检查DOM节点的style属性。大部分的值都不是由用户显式设置的，而是由呈现引擎自己设置的。注意旁边的滚动条：我们只看到了全部已计算样式列表的大约四分之一的内容

style数组也可以直接操作。在为empty节点中的条目设置样式后，我们可以给它加一个边框：

empty.style.border="solid green 2px";

empty.style.width="200px";

我们也可以很容易地仅仅声明一个box类，然后通过修改className属性来应用样式，但是这种方法在某些特定环境下用起来更加便捷，并且它还允许以编程方式构造字符串。例如，我们想要以像素的精度自由地改变元素的大小，如果为此预先定义从1到800像素每个宽度的样式，那显然是低效和笨拙的。

使用上面的方法，我们可以创建新的DOM元素，并且为它们设置样式。在内容处理技术的工具箱中，还有另外一个很有用的工具，它使用一种略微不同的方法来通过程序编写Web页面，这就是InnerHTML属性，我们通过考察这个属性来结束本节。

2.4.5  捷径：使用innerHTML属性

到目前为止，我们所描述的方法通过使用DOM API提供了对页面结构进行低层次控制的能力。然而，对于创建一个文档来说，createElement()和appendChild()提供的API相当冗长，它最适合于以下场合：文档遵循一种有规律的结构来创建，这种结构可以编码为一种算法。所有流行的Web浏览器的DOM元素都支持称作innerHTML的属性，允许以一种非常简单的方式来为元素分配任意的内容。innerHTML是一个字符串，以HTML标记的形式表示一个节点中的内容。例如，我们可以使用innerHTML来重写addNode()函数，就像这样：

function addListItemUsingInnerHTML(el,text){

  el.innerHTML+="

"+text+"
";

}

元素和嵌入的文本节点可以使用单条语句来添加。另一个需要注意的地方是，这里是使用+= 操作来添加属性的，而不是直接赋值。如果使用innerHTML来删除一个节点，我们需要提取和解析这个字符串。innerHTML更加简捷，适合于像这个例子一样相对简单的应用。如果应用程序需要大量修改一个节点，前面展示的操作DOM节点的方法提供了更好的机制。

到这里我们已经讲述了JavaScript、CSS和DOM。它们在动态HTML这个名字首次出现时就在一起使用了。正如在本章前面的介绍中提到的，Ajax使用了很多动态HTML的技术，但是Ajax令人耳目一新之处在于它向这个组合中加入了新的成分。在下面小节中，我们来考察一下Ajax与DHTML的区别所在——在用户使用的同时与服务器通信的能力。