JavaScript DOM（文档对象模型）
内容提要
本文介绍了如何通过JavaScript与DOM（文档对象模型）进行交互。DOM是网页HTML或XML文档的结构，JavaScript可以用来修改和更新它。内容包括DOM的基本概念、元素选择方法（如getElementById、querySelector等）以及DOM操作示例，如更改内容、添加和移除元素。
延伸解读
DOM 选择方法对比
文章介绍了 getElementById、getElementsByClassName、getElementsByTagName、querySelector 和 querySelectorAll 五种选择元素的方法。其中 getElementById 返回单个元素，而其他方法返回集合或 NodeList。querySelector 和 querySelectorAll 支持 CSS 选择器，使用更灵活。读者应根据需要选择合适的方法，并注意返回值的差异。
内容修改的两种方式
修改元素内容时，可以使用 innerHTML 或 textContent。innerHTML 会解析 HTML 标签，而 textContent 仅设置纯文本。文章示例中分别用两者更新了标题和段落。实际使用时需注意：若内容来自用户输入，使用 innerHTML 可能带来 XSS 风险，而 textContent 更安全。
动态添加与移除元素
通过 createElement 创建新元素，再使用 appendChild 将其添加到 DOM 中；移除元素则使用 removeChild。文章示例演示了在 body 末尾添加新段落，并移除原有段落。这些操作是动态更新页面的基础，但需注意被移除的元素若仍有引用，可能造成内存泄漏。
Q&A
什么是DOM，它在网页中有什么作用？
DOM是网页HTML或XML文档的结构，允许通过JavaScript进行修改和更新。
如何使用JavaScript选择DOM元素？
可以使用getElementById、getElementsByClassName、getElementsByTagName、querySelector和querySelectorAll等方法选择DOM元素。
如何通过JavaScript修改DOM元素的内容？
可以使用innerHTML和textContent属性来改变元素的内容。
如何在DOM中添加新元素？
可以使用createElement方法创建新元素，并通过appendChild方法将其添加到DOM中。
如何从DOM中移除元素？
可以使用removeChild方法从DOM中移除指定的元素。
DOM操作的常见示例有哪些？
常见示例包括更改元素内容、添加新元素和移除现有元素。
