DOM节点操作
最新推荐文章于 2023-08-24 22:15:24 发布
阅读量336
收藏
2
点赞数
1、DOM：文档对象模型。核心对象是document
document.body
2、DOM树：浏览器的JavaScript引擎（谷歌的V8引擎）在解析页面时，采用树形结构来存放页面元素
3、DOM操作元素的样式：
（1）元素对象名.style.样式属性名 = 属性值
（2）HTML5对象样式的操作：
a、一个元素的class属性可以有多个值：作用是在保留原有样式的基础上添加新的样式
b、如何在js程序运行过程中动态的添加class属性值：
classList属性：是元素的class属性的列表
4、classList属性提供的方法和属性
（1）属性：length —— 某个标签的class属性值的个数（即多少个类名）
（2）方法：
a、add(‘字符串’)：给元素添加类名。一次只能添加一个
b、remove(‘字符串’)：将元素的类名删除。一次只能删除一个
c、toggle(‘字符串’)：若类名存在则删除，不存在则添加
d、item(index)：根据index，来获取元素的类名
e、contains（‘类名’）：判断元素是否含有给定的类名，若有返回true，没有返回false
5、DOM中节点的操作：采用操作节点的方式来操作页面中的元素
（1）获取节点时使用的属性：
a、firstChild：获取当前节点的首个子节点。
注意：换行符、空格等也是节点
b、nextSibiling：返回同一层级中指定节点之后紧跟的节点
c、lastChild：访问当前节点的最后一个子节点
d、previousSibling：返回同一层级中指定节点的前一个节点
e、nodeName：节点的名称
f、nodeValue：节点的值
g、nodeType：节点类型
1：表示当前节点的类型是标签（元素）
2：表示属性节点
3：表示文本节点
h、parentNode：访问当前元素节点的父节点
i、childNodes：当前节点的所有子节点
（1）相同点：都可以获取子元素
（2）不同点：
childNodes不仅包含文本节点，也包含其他的元素节点，返回值类型是NodeList
children返回的元素节点（即标签），返回值类型是HTMLCollection
getAttribute(‘id’)：用来获取元素的id属性值
getAttributeNode(‘id’)：用来获取元素的id属性（属性节点）
6、追加节点
（1）创建元素节点：
document.createElement()
（2）在指定节点的末尾追加节点
appendChild(newNode)
（3）在指定节点之前添加节点
insertBefore(newNode，node)：将结点newNode插入到节点node之前
该方法需要通过插入节点(node)的父节点来调用
（4）创建文本节点：
document.createTextNode()
练习：利用DOM创建ul无序列表
扫一扫
1305
暂无认证
到【灌水乐园】发言
qq_16887631: 跟GoEasy的IM即时通讯相比，哪个更简单呢？ 最近在看这方面的产品，他们客服说支持支付宝小程序，还支持跨平台通讯，有哪个用过GoEasy的IM吗？
a648x: 博主，有没有github看看？
LOVE_明镜: useOutlet 这一段，经过博主的简写，才算有点指望了，网上看你了很多做法 想为ontlet传参 上下文啥的写的 头皮发麻，以前的版本还能用，现在就难说了。
1西柚: 中啊 做大做强
m0_37737255: 写得很好，值得拜读