DOM编程：创建、增加与克隆节点

本文主要介绍了JavaScript中的DOM操作，包括创建和增加节点、克隆节点以及DOM元素的查找和定位。内容涉及DOM模型的概念，以及如何使用DOM提供的方法来动态改变文档内容。 在JavaScript中，DOM（文档对象模型）是HTML或XML文档的一种表示方式，允许我们通过编程方式对文档进行操作。当解析HTML时，浏览器会构建一个DOM树，其中每个元素、文本和属性都对应于一个节点。DOM提供了多种方法来操作这些节点。 创建和增加节点的方法： 1. `createElement()`：这个方法用于创建新的DOM节点。例如，`document.createElement("img")`会创建一个新的`<img>`元素。 2. `appendChild()`：此方法将新创建的节点添加到指定元素的子节点列表的末尾。例如，`document.body.appendChild(image)`会在文档的body元素后面添加新创建的图像节点。 3. `insertBefore(newObj, oldObj)`：这个方法允许在现有节点`oldObj`之前插入新的节点`newObj`。在给定的例子中，`document.body.insertBefore(image, oldNode)`会在id为"sixty1"的节点之前插入新创建的图像。 克隆节点： `cloneNode(true/false)`方法用于复制一个节点。如果参数为`true`，则复制节点及其所有子节点和属性；如果为`false`，则只复制节点本身。在`copyNode()`函数中，`var copyImage=image.cloneNode(false);`会创建一个没有子节点的`<img>`元素副本，并通过`appendChild()`将其添加到文档的末尾。 此外，还提到了一些DOM操作的其他方法： - `getElementById()`：返回具有特定ID的唯一节点，如`getElementById("sixty1")`。 - `getElementsByName()`：返回一组具有相同name属性的节点，返回结果是一个NodeList。 - `getElementsByTagName()`：返回具有指定标签名的所有节点，同样返回一个NodeList。 - `getAttribute("属性名")`：获取元素的指定属性值。 - `setAttribute("属性名","属性值")`：设置元素的指定属性值。 这些方法结合使用，可以实现对HTML文档的高级操作，比如查找元素、修改内容、添加或删除节点等。通过掌握DOM编程，开发者能够实现动态网页，使用户界面更加交互和灵活。