
操作DOM对象
更新:可以通过修改节点属性或内容来实现 遍历:可以使用 删除:可以使用 添加:可以使用
发布日期:2021-05-14 16:20:49
浏览次数:26
分类:精选文章
本文共 780 字,大约阅读时间需要 2 分钟。
DOM 是网页的树形结构。每个网页都可以看作是一个 DOM 树。操作 DOM 对于开发网页来说是非常重要的技能。
核心操作
操作 DOM 节点包括:
querySelector
或 queryAll
等方法获取节点列表remove()
方法移除节点appendChild
或 insertBefore
方法来添加新节点要操作 DOM 节点,首先要获得对应的节点。下面将介绍几种常用的获取节点方法。
获取 DOM 节点
通过 getElementsByClassName
获取类名节点
var p2 = document.getElementsByClassName('p2');
返回指定类名的所有节点,结果为 HTMLCollect ,可以用数组方式操作。
通过 getElementById
获取 Id 节点
var p1 = document.getElementById('p1');
返回唯一的一个拥有指定 id 的节点。
通过 getElementsByTagName
获取标签节点
var h1 = document.getElementsByTagName('h1');
返回页面中所有的 h1 标签节点。
获取父节点的子节点
var father = document.getElementById('father');var children = father.children;
如果父节点 father
有子节点,可以直接通过 children
获取。也有 father.firstChild
获取第一个子节点,father.lastChild
获取最后一个子节点。
通过以上方法,我们可以方便地获取 DOM 节点,之后可以根据需求进行操作。
发表评论
最新留言
逛到本站,mark一下
[***.202.152.39]2025年05月14日 01时54分11秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Mimikatz2.2 如何抓取Win11登录明文密码
2025-04-14
MinIO - 服务端签名直传(前端 + 后端 + 效果演示)
2025-04-14
Mirantis OpenStack fuel 物理机部署
2025-04-14
MIT-JOS系列6:用户环境(二)
2025-04-14
Mybatis配置
2025-04-14
Mybatis连接池与事务深入
2025-04-14
MyBatis实现 if-else功能
2025-04-14
MyBatis实操第一课5月17号.在学完了MaBatis框架后。
2025-04-14
MyBatis学习总结(9)——使用MyBatis Generator自动创建代码
2025-04-14
MyBatis学习总结(7)——Mybatis缓存
2025-04-14
MyBatis学习总结(6)——调用存储过程
2025-04-14
MyBatis学习总结(4)——解决字段名与实体类属性名不相同的冲突
2025-04-14
MyBatis学习总结(2)——使用MyBatis对表执行CRUD操作
2025-04-14
MyBatis学习总结(27)——Mybatis-Plus使用小技巧
2025-04-14
MyBatis学习总结(26)——Mybatis源码中使用了哪些设计模式?
2025-04-14
mybatis
2025-04-14
Mobx 结合 TypeScript 实现 setState 类型推导
2025-04-14
MyAdapter代码复用工具类
2025-04-14