什么是DOM？理解网页的“骨架”与“血肉”
网页不仅仅是你在浏览器中看到的美丽或复杂的界面。在其背后，浏览器需要一个标准的方式来表示和组织页面上的所有内容，以便程序（特别是JavaScript）能够与之交互。这个标准化的表示方式，就是我们今天要深入探讨的——文档对象模型（Document Object Model），简称DOM。
简单来说，DOM为你的HTML或XML文档创建了一个结构化的表示，并且定义了一种方法，使得你可以通过这个结构来访问、操作和修改文档的内容、结构和样式。它不是你的HTML源代码本身，也不是浏览器最终渲染出来的像素画面，而是一个存在于浏览器内存中的、动态的对象集合。
为什么需要DOM？为何不直接修改HTML字符串？
想象一下，如果你想要改变页面上某个段落的文字，或者在用户点击按钮时显示一个隐藏的图片，而你只能操作原始的HTML文本字符串。这将是一个极其复杂和低效的过程。你需要找到精确的文本位置，小心翼翼地插入或删除字符，同时确保不破坏任何标签结构。这不仅容易出错，而且对于动态、实时的页面更新来说几乎是不可行的。
DOM的存在，正是为了解决这个问题。它将整个文档解析成一个由各种“节点”组成的树状结构。每个HTML元素、文本、属性、注释等等，都成为了树上的一个节点。通过这棵树，你可以使用预定义好的方法（API）精确地定位到任何一个节点，然后轻松地修改它的内容、改变它的属性、移动它的位置，甚至创建全新的节点并添加到树中。这种面向对象的操作方式，远比直接处理字符串要高效、灵活且安全得多。
DOM存在在哪里？以及如何访问它？
DOM是浏览器在加载和解析HTML文档时创建并存储在浏览器内存中的一个数据结构。对于一个网页而言，通常就对应着浏览器窗口中的一个文档对象，而这个文档对象就是DOM树的根源。
要访问DOM，主要是通过浏览器提供的标准API（Application Programming Interface），而最常用的与DOM交互的语言是JavaScript。当你编写JavaScript代码在网页上运行时，你实际上是通过浏览器内置的JavaScript引擎，调用这些DOM API来获取、修改或监听DOM树中的节点。
每个浏览器都实现了这些DOM API，以确保不同的浏览器都能以标准的方式处理网页。根级别的访问点通常是全局的`document`对象，它代表了整个文档（通常是整个HTML页面），是DOM树的入口。
DOM的构成：有多少种节点类型？
DOM树是由不同类型的节点构成的。W3C（万维网联盟）定义了多种节点类型，但对于常见的HTML文档操作，我们主要关注以下几种重要的节点类型：
- Document (文档节点): 这是DOM树的顶层节点，代表整个HTML或XML文档。所有其他节点都是它的后代。通过`document`对象来访问和操作它。
- Element (元素节点): 代表HTML标签，如`<p>`、`<div>`、`<h1>`、`<img>`等。这些是构建页面结构的主要节点，它们可以包含其他元素节点、文本节点等作为子节点。
- Attribute (属性节点): 代表HTML元素的属性，如`id=”myId”`、`class=”myClass”`、`src=”image.jpg”`。属性节点不被认为是其元素节点的子节点，而是与元素节点关联的一部分。
- Text (文本节点): 代表元素或属性包含的文本内容。例如，`<p>这是文本内容</p>`中的“这是文本内容”就是一个文本节点。文本节点是叶子节点（通常不包含其他节点）。
- Comment (注释节点): 代表HTML或XML中的注释，即`<!– 这是注释 –>`。注释节点也可以存在于DOM树中，虽然它们通常不影响页面的渲染。
- DocumentType (文档类型节点): 代表文档的DOCTYPE声明，例如`<!DOCTYPE html>`。它是Document节点的子节点，位于HTML元素节点之前。
DOM通过这些不同类型的节点以及它们之间的父子、兄弟关系，构建了一个完整的文档模型。
如何（怎么）访问和操作DOM？
与DOM交互的核心在于如何找到你想要操作的节点，以及找到后能对其进行哪些操作。JavaScript提供了丰富的DOM API来实现这些功能。
如何访问（获取）DOM节点：
获取DOM节点是操作的第一步。有多种方法可以根据不同的条件来选取节点：
按ID获取元素：
最直接的方法是使用元素的唯一ID。
- `document.getElementById(‘elementId’)`: 返回匹配指定ID的第一个（也是理论上唯一一个）元素节点。如果没有找到，则返回`null`。这是最快和最常用的方法之一。
按标签名获取元素集合：
获取具有相同标签名的所有元素。
- `document.getElementsByTagName(‘tagName’)`: 返回一个包含所有指定标签名元素的HTMLCollection。HTMLCollection是一个类似数组的对象，它是“活”的，意味着文档中元素的增删会自动反映在集合中。
按类名获取元素集合：
获取具有相同CSS类名的所有元素。
- `document.getElementsByClassName(‘className’)`: 返回一个包含所有指定类名元素的HTMLCollection。
使用CSS选择器获取元素：
这是现代Web开发中最灵活和强大的方法，可以使用几乎所有的CSS选择器来定位元素。
- `document.querySelector(‘selector’)`: 返回匹配指定CSS选择器的第一个元素节点。如果没有找到，则返回`null`。
- `document.querySelectorAll(‘selector’)`: 返回一个包含所有匹配指定CSS选择器元素的NodeList。NodeList也是一个类似数组的对象，但它通常是“静态”的（虽然有些浏览器实现是动态的），意味着文档变化不会自动更新已获取的NodeList。
此外，通过已获取的节点，你还可以使用诸如`parentNode`、`childNodes`、`firstChild`、`lastChild`、`nextSibling`、`previousSibling`等属性来在DOM树中进行遍历，找到其父节点、子节点或兄弟节点。
如何操作DOM节点（修改、增删、创建）：
一旦你获取了节点，就可以对其进行各种修改。
修改节点内容：
改变元素内部的文本或HTML结构。
- `element.textContent`: 获取或设置元素的纯文本内容。设置时会替换掉元素内的所有子节点（包括子元素和文本）。
- `element.innerHTML`: 获取或设置元素的HTML内容。设置时会解析字符串中的HTML标签，并创建相应的DOM结构。使用时需要注意安全性问题（防止XSS攻击）。
修改节点属性：
获取、设置或移除元素的属性。
- `element.getAttribute(‘attributeName’)`: 获取指定属性的值。
- `element.setAttribute(‘attributeName’, ‘newValue’)`: 设置或修改指定属性的值。如果属性不存在，则创建该属性。
- `element.removeAttribute(‘attributeName’)`: 移除指定属性。
- 许多常用属性可以直接作为元素的属性来访问和修改，例如 `element.id`, `element.className`, `element.src`, `element.href` 等。
修改节点样式：
直接改变元素的行内样式。
- `element.style.propertyName`: 通过元素的`style`属性访问和修改CSS属性。CSS属性名需要使用驼峰命名法（如`backgroundColor`对应CSS的`background-color`）。
对于应用多个样式或更复杂的样式控制，通常更推荐通过修改元素的`className`或使用`classList` API（如`element.classList.add(‘className’)`, `element.classList.remove(‘className’)`, `element.classList.toggle(‘className’)`）来切换预定义的CSS类。
创建新节点：
在内存中创建新的DOM节点，但尚未添加到文档中。
- `document.createElement(‘tagName’)`: 创建一个新的元素节点。
- `document.createTextNode(‘text content’)`: 创建一个新的文本节点。
添加和移除节点：
将已创建或已存在的节点添加到DOM树中，或从树中移除节点。
- `parentElement.appendChild(childElement)`: 将一个节点添加到指定父节点的子节点列表的末尾。
- `parentElement.insertBefore(newNode, referenceNode)`: 将一个新节点插入到指定父节点的某个参考节点之前。
- `parentElement.removeChild(childElement)`: 从指定父节点中移除其下的某个子节点。
- `element.cloneNode(deep)`: 复制一个节点。`deep`参数（布尔值）决定是否同时复制其所有子节点（包括文本节点）。
DOM与JavaScript、CSS、事件的关系
DOM是连接JavaScript、CSS和网页结构的桥梁。
与JavaScript的关系： 正如前面提到的，JavaScript是与DOM交互的主要脚本语言。通过JavaScript，我们可以利用DOM API来读取页面内容、响应用户行为、动态更新页面显示等，使得网页具有交互性。
与CSS的关系： CSS用于定义页面的样式。CSS选择器（如类选择器、ID选择器、标签选择器等）就是用来匹配DOM树中的元素的。DOM结构的改变（如添加/删除元素，修改类名）会影响CSS规则的应用，从而改变元素的样式。通过DOM API，我们也可以直接操作元素的样式属性。
与事件的关系： 用户在网页上的操作（如点击、鼠标移动、键盘输入）会触发事件。这些事件发生在DOM树中的特定节点上。我们可以通过JavaScript为DOM节点添加事件监听器（例如使用`element.addEventListener(‘click’, handlerFunction)`），当事件发生时，对应的处理函数就会被执行，从而实现对用户交互的响应。
总结
DOM（文档对象模型）是浏览器为HTML/XML文档创建的一种树状结构化表示，它提供了一套标准的API，使得我们可以通过编程方式（主要是JavaScript）来访问、遍历、检查、修改和操作网页的内容、结构和样式。理解DOM是进行前端开发，特别是动态网页和单页应用开发的基础。通过掌握如何获取、修改、创建和管理DOM节点，开发者可以构建出响应用户、实时更新的丰富交互式网页应用。它不是静态的源代码，而是网页在内存中的动态镜像，是实现客户端脚本功能的关键。
