javascript DOM的详解及实例代码

深入理解JavaScript中的DOM及实例操作

一直以来，DOM（文档对象模型）在JavaScript中似乎是最容易掌握的部分。不可否认，从概念上来说，DOM确实相对直观，所需掌握的方法也相对固定。它常常是JavaScript入门的起点。

在我最近进行的一些涉及DOM操作的练习中，我发现自己的知识其实非常零散。也许有许多朋友会认为自己掌握了DOM，可以随意调用一些方法或者直接使用jQuery，而无需关心DOM的细节。诚然，使用jQuery可以大大简化DOM操作，但在深入了解和运用JavaScript的过程中，对DOM的详细了解变得至关重要。于是，我整理出了以下关于DOM的一些常用操作方法。

在W3C的DOM规范中，定义了许多节点类型及其相关操作。节点层次指的是在HTML文档中存在的各种节点（如标签），它们之间的关系构成了树状结构。其中，W3C的DOM1级规范定义了一个NODE接口，包含了一些非常有用的方法。

每个节点都有节点类型标志，即NodeType属性。例如，元素节点的nodeType值为'1'，文本节点的nodeType值为'3'，而文档节点的nodeType值为'9'。

文档节点是DOM树中的顶层节点，表示整个文档。它具有一些基本特征，可以通过console.log进行输出查看。文档节点还提供了一些有用的属性和方法，例如获取文档的子节点、文档的相关信息以及查找元素等。

元素节点是DOM中另一种重要的节点类型，它提供了对元素标签名、子节点及特性的访问。元素节点是构建网页结构的基础，因此熟练掌握元素节点的操作对于开发网页应用至关重要。

除了以上介绍的文档节点和元素节点，DOM还包含其他类型的节点，如属性节点、文本节点等。这些节点类型都有各自的用途和操作方式。通过掌握这些节点类型的操作，我们可以更灵活地操作网页元素、处理用户交互等。

HTML元素的奥秘

让我们深入了解HTML元素及其属性。通过document对象，我们可以轻松获取到指定的HTML标签对象。假设我们有一个带有特定ID的div元素，我们可以通过控制台打印出它的各种属性。

让我们来看看这个div元素的基本特征：

```javascript

var div = document.getElementById("myDiv");

console.log(div.nodeType); // 输出元素节点的类型，通常为1

console.log(div.nodeName); // 输出元素的标签名，例如"DIV"

console.log(div.nodeValue); // 对于元素节点，此属性永远返回null

```

我们还可以获取该元素的更多属性，例如它的类名、标题、语言和方向：

```javascript

console.log(div.id); // 输出 "myDiv"

console.log(div.className); // 输出 "bd"

console.log(div.title); // 输出 "Body text"

console.log(div.lang); // 输出 "en"

console.log(div.dir); // 输出 "ltr"

```

除了获取属性，我们还可以设置和删除元素的属性。例如：

```javascript

div.setAttribute("id", "yourDiv"); // 设置新的id属性

div.removeAttribute("id"); // 删除id属性

```

需要注意的是，在IE7及以下的版本中，setAttribute、getAttribute和removeAttribute这三种方法在某些情况下可能会有异常行为。一般推荐使用属性来设置和获取元素的特性。

接下来，让我们元素的子节点。以下是一个简单的例子：

```html

• Item 1
• Item 2
• Item 3

```

如果我们通过`document.getElementById("myList")`获取这个ul元素，我们可能会认为它只有两个子节点（两个li元素）。但实际上，使用`childNodes`属性时，我们会发现它返回了更多的节点数。这是因为`childNodes`不仅包含了元素节点，还包含了文本节点。在这个例子中，实际上有7个节点（包括三个元素节点和四个文本节点）。如果我们只想处理元素节点，我们需要通过检查节点的类型来过滤它们。最好的方法是通过`getElementsByTagName`方法直接获取元素节点对象。例如：`var items = ml.getElementsByTagName("li");`这样可以得到三个li节点对象。此外还需要注意文本节点，它们包含的是可以照字面解释的纯文本内容，纯文本中可以包含转义后的HTML字符，但不能包含HTML代码。通过这些方法我们可以深入了解HTML元素的结构和操作方式。节点之基石：深入文本节点特性

设想一个场景，你正在与 DOM 进行交互，试图获取页面上的某个元素。这个过程就像在一座大楼中找寻特定的房间。当你成功找到 `

` 这个元素节点后，你或许对其内部的文本节点充满好奇。今天，我们将深入文本节点的特性及其重要性。

我们来了解一下文本节点的基本特征。在 DOM 中，文本节点是一个无形的存在，它包裹着元素节点之间的文本内容。在上面的例子中，`