JavaScript 的 DOM（文档对象模型，Document Object Model）是一种编程接口，它将 HTML 或 XML 文档的内容表示为树状结构，并允许 JavaScript 动态地访问和更新文档的内容、结构和样式。以下是关于 JavaScript DOM 的详细介绍：
一、DOM 的基本概念
- DOM 树：
- DOM 将 HTML 文档表示为一个树状结构，其中每个元素、属性、文本节点等都是树的一个节点。
- 树的根节点通常是
<html>元素，其他元素作为其子节点依次排列。
- 节点类型：
- DOM 定义了多种节点类型，如元素节点、文本节点、注释节点、属性节点等。
- 每种节点类型都有其特定的属性和方法，用于访问和操作该类型的节点。
- 文档对象：
document对象是整个 DOM 树的入口点，代表整个载入的网页。- 通过
document对象，可以访问和操作 DOM 树中的任何节点。
二、访问 DOM 节点
- 通过 ID 访问：
- 使用
document.getElementById(id)方法可以根据元素的 ID 属性获取对应的元素节点。
- 使用
- 通过类名访问：
- 使用
document.getElementsByClassName(className)方法可以获取具有指定类名的所有元素节点（返回一个类数组对象）。
- 使用
- 通过标签名访问：
- 使用
document.getElementsByTagName(tagName)方法可以获取具有指定标签名的所有元素节点（返回一个类数组对象）。
- 使用
- 通过选择器访问：
document.querySelector(selector)方法返回匹配指定 CSS 选择器的第一个元素。document.querySelectorAll(selector)方法返回匹配指定 CSS 选择器的所有元素（返回一个 NodeList 对象）。
三、操作 DOM 节点
- 创建和插入节点：
- 使用
document.createElement(tagName)方法可以创建一个新的元素节点。 - 使用
appendChild(node)方法可以将一个节点添加到其父节点的子节点列表的末尾。 - 使用
insertBefore(newNode, referenceNode)方法可以将一个节点插入到另一个节点之前。
- 使用
- 删除节点：
- 使用
removeChild(node)方法可以从父节点中删除一个子节点。
- 使用
- 替换节点：
- 使用
replaceChild(newNode, oldNode)方法可以用一个新节点替换一个旧节点。
- 使用
- 克隆节点：
- 使用
cloneNode(deep)方法可以克隆一个节点。如果deep参数为true，则进行深度克隆（包括子节点）；如果为false，则进行浅克隆（不包括子节点）。
- 使用
四、操作节点属性和内容
- 属性操作：
- 可以使用
element.setAttribute(name, value)方法设置元素的属性。 - 使用
element.getAttribute(name)方法可以获取元素的属性值。 - 使用
element.removeAttribute(name)方法可以删除元素的属性。
- 可以使用
- 内容操作：
- 使用
element.innerHTML属性可以设置或获取元素内部的 HTML 内容。 - 使用
element.textContent属性可以设置或获取元素内部的文本内容。
- 使用
五、操作节点样式
- 内联样式操作：
- 可以直接通过
element.style属性设置或获取元素的内联样式。例如，element.style.color = "red"会将元素的文本颜色设置为红色。
- 可以直接通过
- 类名操作：
- 使用
element.className属性可以设置或获取元素的类名。 - 使用
element.classList属性可以操作元素的类列表（添加、删除、切换类等）。
- 使用
六、事件处理
- 事件监听：
- 可以使用
addEventListener(event, handler, [options])方法为元素添加事件监听器。当指定的事件发生时，会调用指定的处理函数。
- 可以使用
- 事件处理函数：
- 事件处理函数是当事件发生时执行的代码。在函数内部，可以使用事件对象（传递给处理函数的参数）来获取有关事件的信息。
七、遍历 DOM 树
- 节点导航：
- 可以使用节点的父节点（
parentNode）、子节点（childNodes、children）、兄弟节点（previousSibling、nextSibling、previousElementSibling、nextElementSibling）等属性来遍历 DOM 树。
- 可以使用节点的父节点（
- 遍历方法：
- 可以使用
for循环、forEach方法、for...of循环等遍历 DOM 节点列表。
- 可以使用
综上所述，JavaScript 的 DOM 提供了一种强大而灵活的方式来访问和操作 HTML 文档的内容、结构和样式。通过掌握 DOM 的基本概念和操作方法，可以开发出更加动态和交互性强的 Web 应用程序。
评论: