DOM 是什么？
DOM（Document Object Model，文档对象模型）是一种编程接口，用于访问和操作 HTML 和 XML 文档的结构。它将整个文档表示为一个树状结构，每个节点都代表文档中的一个元素、属性或文本。
简单来说，DOM 提供了一种将网页内容和脚本语言（如 JavaScript）连接起来的方式，使开发者可以使用脚本动态地访问和修改文档内容、结构和样式。这是实现网页交互的基础。
如何使用 JavaScript 操作 DOM 元素？
在实际开发中，操作 DOM 是前端工程师的日常工作之一。它允许你响应用户交互或动态更新页面内容。下面按功能分类，梳理常用的操作方法。
获取 DOM 元素
要操作某个元素，首先得拿到它的引用。根据场景不同，可以选择不同的获取方式：
通过 ID 获取
如果元素有唯一的 id 属性，这是最快的方式：
const myElement = document.getElementById('my-element');
通过 CSS 选择器获取
使用 querySelector 可以匹配第一个符合条件的元素，灵活性很高：
const element = document.querySelector('.my-class');
通过标签名或类名获取 如果需要一组元素，可以使用以下方法，它们返回的是类似数组的对象（HTMLCollection 或 NodeList）：
// 获取所有 p 标签
const paragraphs = document.getElementsByTagName('p');
// 获取所有指定类名的元素
const elements = document.getElementsByClassName('my-class');
修改元素内容
拿到元素后，你可以修改它的文本或 HTML 结构。这里有两个常用属性需要注意：
修改纯文本
使用 textContent 或 innerText。它们会忽略 HTML 标签，只处理文本内容，安全性较好。
myElement.textContent = '新的文本内容';
修改 HTML 内容
使用 innerHTML 可以插入 HTML 片段，但要注意 XSS 风险，不要直接拼接用户输入。
myElement.innerHTML = '<strong>加粗文本</strong>';
