DOM基础：操作网页内容的接口与事件处理-优快云博客

本文链接：https://blog.youkuaiyun.com/love_life_forever/article/details/131177172

3.1 什么是DOM

DOM是文档对象模型（Document Object Model）的缩写。它是一种用于表示和操作网页内容的标准编程接口。在Web开发中，网页被表示为一个文档树，由各种元素（如标签、文本、属性等）组成，DOM提供了一种规范的方式来访问和操作这个文档树。

DOM可以将网页视为一个由节点（Node）组成的层次结构。每个节点代表文档中的一个元素、属性、文本或注释。节点之间存在父子关系，形成了一个树状结构。根节点是整个文档，称为文档节点（Document Node）。

通过DOM，开发人员可以使用脚本语言（如JavaScript）来访问和操作文档中的各个节点。例如，可以通过DOM来获取、创建、修改或删除元素、属性、文本等。通过操作DOM，可以实现动态地修改网页内容、样式和结构，从而实现交互性和动态性。

DOM提供了一系列的API（应用程序编程接口），供开发人员使用。常见的API包括查询和操作节点的方法，事件处理方法，样式修改方法等。通过这些API，开发人员可以方便地操纵网页内容，实现丰富的交互效果和用户体验。

3.2 DOM的基本元素和属性

DOM基本元素

DOM的基本元素是节点（Node），节点可以分为不同的类型，包括以下几种常见的节点类型：

元素节点（Element Node）：表示HTML或XML文档中的标签元素，如<div>、<p>、<a>等。
文本节点（Text Node）：表示文档中的纯文本内容，如段落中的文字、标签之间的空格等。
属性节点（Attribute Node）：表示元素节点的属性，如id、class、href等。
注释节点（Comment Node）：表示文档中的注释内容，以结尾。
文档节点（Document Node）：表示整个文档，是DOM树的根节点。

DOM的基本属性包括

nodeName：返回节点的名称。对于元素节点，返回标签名；对于文本节点，返回"#text"；对于注释节点，返回"#comment"等。
nodeValue：返回或设置节点的值。对于文本节点，返回文本内容；对于元素节点和注释节点，返回null。
nodeType：返回节点的类型。元素节点的值是1，文本节点的值是3，属性节点的值是2，注释节点的值是8，文档节点的值是9。
parentNode：返回节点的父节点。
childNodes：返回节点的子节点列表。
firstChild：返回节点的第一个子节点。
lastChild：返回节点的最后一个子节点。
previousSibling：返回节点的前一个兄弟节点。
nextSibling：返回节点的后一个兄弟节点。

这些是DOM的基本元素和属性，通过这些元素和属性，可以对文档进行遍历、访问和修改。

3.3 DOM的常用操作方法

DOM提供了一系列常用的操作方法，可以通过这些方法来访问、创建、修改和删除文档中的节点。以下是一些常见的DOM操作方法：

查询元素节点：
- getElementById(id)：根据元素的id属性获取元素节点。
- getElementsByTagName(tagName)：根据标签名获取元素节点列表。
- getElementsByClassName(className)：根据类名获取元素节点列表。
- querySelector(selector)：根据选择器获取符合条件的第一个元素节点。
- querySelectorAll(selector)：根据选择器获取所有符合条件的元素节点列表。
创建节点：
- createElement(tagName)：创建一个新的元素节点。
- createTextNode(text)：创建一个包含指定文本内容的文本节点。
- createComment(text)：创建一个注释节点。
修改节点：
- appendChild(node)：将指定节点作为最后一个子节点添加到目标节点。
- insertBefore(newNode, referenceNode)：将新节点插入到参考节点之前。
- replaceChild(newNode, oldNode)：用新节点替换旧节点。
- removeChild(node)：从父节点中移除指定节点。
- setAttribute(name, value)：设置元素节点的属性。
- removeAttribute(name)：移除元素节点的属性。
节点遍历：
- parentNode：获取父节点。
- childNodes：获取子节点列表。
- firstChild：获取第一个子节点。
- lastChild：获取最后一个子节点。
- previousSibling：获取前一个兄弟节点。
- nextSibling：获取后一个兄弟节点。
修改样式：
- classList：获取或修改元素节点的类名。
- style.property：设置元素节点的样式属性，如element.style.color = "red"。
事件处理：
- addEventListener(event, callback)：为元素节点添加事件监听器。
- removeEventListener(event, callback)：移除元素节点的事件监听器。

这些是DOM中常用的操作方法，可以根据具体的需求使用相应的方法来实现对文档节点的操作和交互。

下面是一个使用DOM的常用操作方法的简单示例：

<!DOCTYPE html>
<html>
<head>
  <title>DOM操作示例</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1 id="title">Hello, DOM!</h1>
  <ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <script>
    // 查询元素节点并修改内容
    const titleElement = document.getElementById('title');
    titleElement.textContent = 'Hello, DOM Manipulation!';

    // 创建新节点并添加到父节点
    const newItem = document.createElement('li');
    newItem.textContent = 'Item 4';

    const listElement = document.getElementById('list');
    listElement.appendChild(newItem);

    // 修改样式
    newItem.classList.add('highlight');

    // 移除节点
    const firstItem = listElement.firstChild;
    listElement.removeChild(firstItem);

    // 添加事件监听器
    listElement.addEventListener('click', (event) => {
      const clickedItem = event.target;
      clickedItem.classList.toggle('highlight');
    });
  </script>
</body>
</html>

这个示例展示了如何使用DOM操作方法来修改文档中的元素节点、创建新节点、修改样式、移除节点和添加事件监听器。在JavaScript代码中，我们使用document对象来访问和操作文档的各个节点。具体操作包括：

通过getElementById方法获取title元素节点，并使用textContent属性修改其文本内容。
使用createElement创建一个新的li元素节点，并设置其文本内容为Item 4。
使用appendChild将新节点添加到list元素节点中。
使用classList操作新节点的类名，为其添加highlight类，从而修改其样式。
使用removeChild方法移除list中的第一个子节点。
使用addEventListener添加click事件监听器，当列表中的项被点击时，切换其类名以实现样式的切换。

通过这些DOM操作方法，我们可以对文档中的节点进行查询、创建、修改和删除，实现动态的网页交互效果。

3.4 事件处理和监听

在DOM中，事件处理和监听是通过添加事件监听器来实现的。事件监听器是一种函数，它会在特定的事件触发时被调用。通过监听事件，可以对用户的操作作出响应，实现交互性。

以下是在DOM中进行事件处理和监听的常见方法：

addEventListener(event, callback)：该方法用于向指定的元素节点添加事件监听器。它接受两个参数：事件类型（如click、keydown等）和回调函数（事件处理函数）。当指定的事件类型在该元素节点上触发时，回调函数将被调用。

示例：
```
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  console.log('Button clicked!');
});
```

removeEventListener(event, callback)：该方法用于从指定的元素节点移除事件监听器。它接受相同的两个参数：事件类型和回调函数。被移除的监听器必须与添加时的事件类型和回调函数完全匹配。

示例：

const button = document.getElementById('myButton');
function clickHandler(event) {
  console.log('Button clicked!');
}
button.addEventListener('click', clickHandler);

// 之后，如果想要移除监听器
button.removeEventListener('click', clickHandler);

事件对象（Event Object）：在事件处理函数被调用时，会自动传递一个事件对象作为参数。事件对象包含与事件相关的信息，如事件类型、目标元素、鼠标位置等。

示例：
```
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  console.log('Button clicked!');
  console.log('Target element:', event.target);
});
```

事件冒泡（Event Bubbling）和事件捕获（Event Capturing）：DOM事件模型中，事件触发后会按照从目标元素到根节点（或称为捕获阶段）再从根节点到目标元素（或称为冒泡阶段）的顺序进行传播。通过设置addEventListener方法的第三个参数，可以选择在捕获阶段或冒泡阶段监听事件。

示例：

const container = document.getElementById('myContainer');
const button = document.getElementById('myButton');

container.addEventListener('click', function(event) {
  console.log('Container clicked!');
}, true); // 在捕获阶段监听事件

button.addEventListener('click', function(event) {
  console.log('Button clicked!');
}, false); // 在冒泡阶段监听事件

这些方法和概念可以帮助我们实现对特定事件的监听，以便在事件发生时执行相应的操作。根据具体需求，可以选择添加、移除事件监听器，并通过事件对象获取更多事件相关的信息。

3.5 动态创建和修改DOM元素

动态创建和修改DOM元素是Web开发中常见的操作，可以使用DOM提供的方法进行实现。下面是一些常见的方法和示例：

创建元素节点：
使用createElement(tagName)方法创建一个新的元素节点，并可使用其他DOM方法进行进一步的设置和操作。

示例：
```
const newElement = document.createElement('div');
newElement.textContent = 'This is a new element';
newElement.setAttribute('class', 'my-element');
```

插入元素节点：
使用appendChild(node)或insertBefore(newNode, referenceNode)方法将一个元素节点插入到指定的父节点中。

示例：

const parentElement = document.getElementById('parent');
const newElement = document.createElement('div');
parentElement.appendChild(newElement); // 将新节点作为最后一个子节点添加到父节点

const referenceElement = document.getElementById('reference');
const newElement = document.createElement('div');
parentElement.insertBefore(newElement, referenceElement); // 将新节点插入到参考节点之前

修改元素节点的属性和内容：
可以使用setAttribute(name, value)方法设置元素节点的属性，使用textContent、innerHTML或innerText属性修改元素节点的文本内容。

示例：
```
const element = document.getElementById('myElement');
element.setAttribute('class', 'new-class');

element.textContent = 'New content'; // 修改元素节点的文本内容
```

移除元素节点：
使用removeChild(node)方法从父节点中移除指定的子节点。

示例：

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');
parentElement.removeChild(childElement);

替换元素节点：
使用replaceChild(newNode, oldNode)方法用新节点替换旧节点。

示例：

const parentElement = document.getElementById('parent');
const oldElement = document.getElementById('old');
const newElement = document.createElement('div');
parentElement.replaceChild(newElement, oldElement);

使用innerHTML插入HTML代码：
使用innerHTML属性可以直接插入HTML代码到元素节点的内容中。

示例：

const element = document.getElementById('myElement');
element.innerHTML = '<p>This is <strong>HTML</strong> code.</p>';

通过上述方法，你可以动态地创建、插入、修改和删除DOM元素。这些操作可以帮助你实现动态生成内容、交互性和动画效果等。记得在操作DOM元素时，选择适当的方法和属性，并遵循良好的编程实践以确保代码的可读性和性能。