JavaScript DOM元素常见操作详解【添加、删除、修改等】
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树中的节点来实现的。掌握这些基本操作,能够帮助开发者更加灵活地控制网页上的内容。
- 粉丝: 2
- 资源: 957
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 崔玉涛 婴儿辅食表,用于6到12个月的婴儿
- 夏令营~预推免~保研通用资料汇总整合(英文知识点汇总)(1min急速通关英文面试)(简历英文)(常见英文问题)
- csdn_v6.4.8-3.apk
- 基于Vue框架构建的shop_ui前端商品展示平台设计源码
- 基于STM32单片机智能药盒定时吃药喂水蓝牙APP设计(毕业设计)
- bahnschrift.ttf
- 基于SpringBoot和Vue的青锋后台管理系统设计源码
- 基于Java短信内容转发功能的SmsToEmailApp设计源码
- 基于Java语言的华农物品租借平台设计源码
- 通过阿里云 DNS 为 Let's Encrypt 签发 SSL 证书提供验证的脚本工具