如何使用DOM操作HTML文档？

什么是DOM？

DOM（Document Object Model）是将HTML文档表示为树形结构的一种表达方式，其中HTML文档的每个元素都成为一个“节点”，并且DOM提供了一种基于这些节点的操作方式。

如何访问DOM？

通过JavaScript，我们可以使用document对象来访问DOM。例如，通过document.getElementById("element-id")就可以获取ID为“element-id”的元素节点。

如何更改DOM？

可以使用JavaScript来更改DOM中的任何元素属性，例如innerHTML（更改元素的内容）、style（更改元素的样式）以及className（更改元素的类名）。

如何创建新的节点并添加到DOM中？

可以使用document.createElement()方法来创建新的元素节点。例如，通过var newElement = document.createElement("p")就可以创建一个新的“p”元素节点。然后，可以使用parentElement.appendChild(newElement)将其添加至DOM中的相应父元素节点中。

DOM的优点

DOM提供了一种方便的方式来操作HTML文档，使得可以通过JavaScript来实现更多交互和动态的效果。此外，通过DOM操作，可以将页面内容和样式分离，实现更好的可维护性。

标签

DOM、JavaScript、HTML、操作、节点