JavaScript利用HTML DOM进行文档操作的方法
HTML DOM：理解与应用文档对象模型
一、DOM简介
文档对象模型（DOM）是由W3C制定的一套标准，用于访问和操作诸如XML和XHTML等结构化文档。它为开发者提供了一个平台和语言中立的接口，使得程序和脚本能够动态地访问和更新文档的内容、结构和样式。其中，HTML DOM是专门用于HTML文档的标准模型，定义了所有HTML元素的对象和属性，以及访问它们的方法。
二、DOM的树状结构
在DOM中，整个文档被视为一个文档节点（根节点）。每个标签被看作是一个元素节点。包含在标签中的文本是文本节点，而标签的每个属性则是一个属性节点。还有注释节点等。这些节点共同构成了一个层次结构，即DOM树。
三、DOM属性与方法
DOM为每一个节点提供了一系列的属性和方法，让我们能够获取和修改节点的信息。例如：
nodeName：节点的名称；
nodeValue：节点的值；
parentNode：节点的父节点；
childNodes：节点的子节点；
attributes：节点的属性节点集合。
四、访问节点
我们可以通过几种方式访问DOM中的节点：
1. 使用getElementsByTagName()方法；
2. 循环遍历节点树；
3. 利用节点的关系在节点树中导航。
五、节点操作
我们可以使用JavaScript来创建、添加、删除和修改DOM中的节点。具体方法如下：
1. 创建节点：使用createElement()创建元素节点，createTextNode()创建文本节点，createAttribute()创建属性节点。
2. 添加节点：可以使用appendChild()方法将新创建的节点添加到已有的节点下，使其成为其子节点。
3. 删除节点：可以使用removeChild()方法从父节点中删除子节点。
4. 修改节点：通过修改节点的属性或内容，可以实现对节点的修改。例如，我们可以使用setAttribute()方法设置元素的属性值，或者使用innerHTML属性修改元素的内容。
在Web开发中，我们经常需要动态地创建和修改HTML节点。通过DOM（Document Object Model）提供的API，我们可以在浏览器端对页面结构进行灵活的操作。让我们深入了解一下如何使用这些API来创建和添加节点，并修改它们。
让我们来看如何添加新的节点。在DOM中，有几种常用的方法可以在一个元素内部添加新的子节点：
appendChild() 方法：此方法可以在当前节点的子节点列表末尾添加一个新的子节点。你只需要将新的子节点作为参数传递给该方法即可。
insertAfter()（虽然此方法不是标准DOM API的一部分，但可以通过其他方式实现）：此方法可以在指定的子节点之后添加新的子节点。
除了添加节点，我们还可以修改节点的属性。在DOM中，我们可以使用 setAttributeNode() 方法来设置元素节点的属性。这个方法接受一个参数，即你想要设置的属性节点。
以下是一个示例，展示了如何使用这些方法：
在HTML文档中，我们有一个div元素和一些JavaScript代码。当浏览器加载此页面时，会执行一段函数createAndAddNode()。这个函数首先创建一个p元素和一个文本节点，然后将文本节点添加到p元素中，再将p元素添加到div元素中。接下来，它创建一个a（超链接）元素，设置其文本和href属性，然后将其添加到div元素中。
对于修改节点，我们通常指的是修改元素内部的文本或元素的属性值。我们可以通过访问到文本节点或属性节点后，为其nodeValue赋值来实现更改。对于属性值的改变，我们还可以在元素节点上调用setAttribute()方法来实现。
在网页开发中，我们常常需要动态地改变页面的DOM结构。今天，让我们来如何使用JavaScript来修改HTML节点的属性。
让我们来看一个示例函数`changeSize()`。这个函数的主要目的是改变一个特定元素的属性。这个函数通过`document.getElementById()`方法获取到一个拥有特定ID的HTML元素。然后，使用`setAttribute()`方法来修改这个元素的属性。在这个例子中，我们将一个文本输入元素（可能是`