JavaScript中的DOM类函数

获取元素

四种方式

其余的我在这里提供一部分介绍：

在JavaScript中，文档对象模型（DOM）是一个跨平台的和语言独立的接口，它允许程序和脚本动态地访问和更新文档的内容、结构以及样式。DOM将文档呈现为节点和对象的树形结构，这样，编程语言就可以与页面交互。这里介绍一些在操作DOM时常用的函数和对象类型：

1. 获取元素

- **`document.getElementById(id)`**：根据元素ID获取一个元素。
- **`document.getElementsByTagName(name)`**：根据标签名获取一组元素。
- **`document.getElementsByClassName(className)`**：根据类名获取一组元素。
- **`document.querySelector(selector)`**：返回文档中匹配指定CSS选择器的第一个元素。
- **`document.querySelectorAll(selector)`**：返回文档中匹配指定CSS选择器的所有元素的集合。

 2. 创建、插入和删除节点

- **`document.createElement(tagName)`**：创建一个新的元素节点。
- **`parentNode.appendChild(childNode)`**：将一个节点添加到指定父节点的子节点列表末尾。
- **`parentNode.insertBefore(newNode, referenceNode)`**：在指定的子节点前插入新的子节点。
- **`parentNode.removeChild(child)`**：删除并返回指定的子节点。
- **`element.innerHTML`**：获取或设置元素内的HTML或XML标记。

3. 属性和样式

- **`element.getAttribute(attributeName)`**：获取元素的属性值。
- **`element.setAttribute(attributeName, value)`**：设置元素的属性值。
- **`element.removeAttribute(attributeName)`**：删除元素的属性。
- **`element.style`**：通过它可以获取或设置元素的样式。例如，`element.style.color = 'red'`可以设置元素的文字颜色为红色。

4. 事件处理

- **`element.addEventListener(event, function, useCapture)`**：为元素添加一个事件监听器。
- **`element.removeEventListener(event, function, useCapture)`**：移除元素的事件监听器。
- **`event.preventDefault()`**：阻止事件的默认行为（如果事件可以被取消）。
- **`event.stopPropagation()`**：阻止事件冒泡到父元素。

5. 遍历和修改DOM

- **`parentNode.childNodes`**：返回节点的子节点集合。
- **`parentNode.firstChild`**：返回节点的第一个子节点。
- **`parentNode.lastChild`**：返回节点的最后一个子节点。
- **`node.nextSibling`**：返回节点的下一个兄弟节点。
- **`node.previousSibling`**：返回节点的前一个兄弟节点。
- **`element.classList`**：提供了对类列表的访问，可以添加、移除和切换CSS类。

以上是一些基本的DOM操作函数和对象类型。通过这些工具，可以实现对网页的动态修改，包括内容、结构和样式的更新。