JavaScriptDOM元素常见操作详解【添加、删除、修改等】

130 浏览量 2020-10-18 13:35:07 上传评论收藏 70KB PDF 举报

DOM（文档对象模型）是JavaScript操作网页的基石。它是一种通过脚本访问和更新文档（如HTML和XML）内容的API。DOM将文档结构视为一棵节点树，包括各种节点类型：元素节点、属性节点和文本节点。元素节点代表文档中的标签元素，比如HTML文档中的`<body>`、`<p>`等；属性节点代表元素节点的属性，例如`id`、`class`；文本节点代表元素或属性中的文本内容。DOM为这些节点提供了访问和操作的接口。 ### 获取DOM元素 1. `getElementById`：通过元素的ID属性获取单个元素。 2. `getElementsByTagName`：根据标签名获取一组元素，返回的是一个NodeList集合。 3. `getElementsByClassName`：根据class属性获取一组元素，同样返回一个NodeList集合。 4. `getElementsByName`：根据name属性获取一组元素。注意，`document`对象支持以上四种方法，而`element`对象只支持`getElementsByTagName`和`getElementsByClassName`。 ### 修改DOM元素 - 修改内容：可以使用`innerText`或`innerHTML`属性。`innerText`仅仅是普通文本，不会解析HTML标签；`innerHTML`则按照HTML规则处理，可以包含HTML标签。 - 修改样式： - 使用`style`属性直接操作单个样式属性，如`element.style.color = 'red'`。 - 使用`className`属性添加或修改元素的类名，从而改变CSS规则对元素的影响，如`element.className = 'newClass'`。在JavaScript中，可以使用`getAttributeNode`方法获取元素的属性节点，这允许我们访问属性节点的类型、名称和值。 ### 添加和删除DOM元素添加元素通常需要先创建一个新的元素节点，然后将其插入到DOM树中的合适位置。常用的方法有： - 创建新元素：使用`document.createElement`方法。 - 插入元素：使用`appendChild`、`insertBefore`等方法。删除元素则可以使用`removeChild`方法，这通常需要先获取到该元素的父节点，再通过父节点的`removeChild`方法来移除。 ### 代码示例以获取元素为例，使用`getElementById`获取具有特定ID的元素，然后可以修改这个元素的样式或内容。 ```javascript var p1 = document.getElementById("p1"); p1.style.color = "red"; // 修改样式 p1.innerHTML = "这是一个新的内容"; // 修改内容 ``` 如果想为元素添加或移除类，可以这样操作： ```javascript function style1() { var p1 = document.getElementById("p1"); p1.className = "style1"; } function style2() { var p1 = document.getElementById("p1"); p1.className = "style2"; } ``` 删除元素可以使用如下代码： ```javascript var parentElement = document.getElementById("parent"); var childElement = document.getElementById("child"); parentElement.removeChild(childElement); ``` JavaScript通过DOM提供了对网页内容的动态控制能力。无论是获取、添加、删除还是修改DOM元素，都是通过操作DOM树中的节点来实现的。掌握这些基本操作，能够帮助开发者更加灵活地控制网页上的内容。

资源推荐

资源详情

资源评论