Javascript & DHTML DOM基础和基本API第5/5页

《Javascript & DHTML DOM基础和基本API》是一本介绍JavaScript和DHTML的书籍，其中包含了JavaScript和DHTML DOM的基础和API，本攻略将对第5/5页进行详细解读。

1. 什么是DOM？

DOM（Document Object Model）是HTML和XML文档的编程接口，它将整个页面抽象成一个树状结构，也就是DOM树。DOM树由节点构成，节点可以是元素节点、文本节点、注释节点等。

2. DOM的API

DOM提供了一系列的API，用于操作DOM树中的节点，常用的API包括：

• getElementById(id)：获取id属性等于指定值的元素节点。
• getElementsByTagName(tagName)：获取指定标签名的元素节点列表。
• createElement(tagName)：创建指定标签名的元素节点。
• appendChild(node)：向指定节点添加子节点。

3. 示例说明

示例1：获取元素节点并修改样式

// 获取id为"myDiv"的元素节点
var myDiv = document.getElementById("myDiv");

// 修改元素节点的样式
myDiv.style.backgroundColor = "blue";
myDiv.style.color = "white";

代码中使用getElementById()方法获取id为"myDiv"的元素节点，并通过修改其style属性来修改其样式。

示例2：创建元素节点并添加子节点

// 创建一个新的段落元素
var newP = document.createElement("p");

// 创建一个文本节点并添加到新的段落元素中
var newText = document.createTextNode("这是新添加的段落");
newP.appendChild(newText);

// 获取id为"box"的元素节点，并向其添加新的段落元素
var box = document.getElementById("box");
box.appendChild(newP);

代码中使用createElement()方法创建一个新的段落元素，然后通过createTextNode()方法创建一个文本节点并添加到新的段落元素中，最后使用appendChild()方法将新的段落元素添加到id为"box"的元素节点中。