DOM 重点核心

关于dom操作,我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作
1.创建

1. document.write
2. innerHTML
3. createElement
区别
1.document.write 是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
2.innerHTML 是将内容写入某个 DOM 节点,不会导致页面全部重绘
3.innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
4.createElement() 创建多个元素效率稍低一点点,但是结构更清晰不同浏览器下,innerHTML 效率要比 creatElement 高

2.增

1.appendChild
2.insertBefore
1.node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的after 伪元素
2.node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before伪元素

3.删除,复制节点

removeChild
node.removeChild() 方法从 DOM 中删除一个子节点,返回删除的节点。
cloneNode()
node.cloneNode() 方法返回调用该方法的节点的一个副本。
1.如果括号参数为空或者为 false ,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
2.如果括号参数为 true ,则是深拷贝,会复制节点本身以及里面所有的子节点

4.改

主要修改dom的元素属性,dom元素的内容、属性, 表单的值等
1.修改元素属性: src、href、title等
2.修改普通元素内容: innerHTML 、innerText
3.修改表单元素: value、type、disabled等
4.修改元素样式: style、className

5.查

主要获取查询dom的元素
1.DOM提供的API 方法: getElementById、getElementsByTagName 古老用法 不太推荐
2.H5提供的新方法: querySelector、querySelectorAll 提倡
3.利用节点操作获取元素: 父(parentNode)、子(children)、兄(previousElementSibling、
nextElementSibling) 提倡

6. 属性操作

1.setAttribute:设置dom的属性值
2.getAttribute:得到dom的属性值
3.removeAttribute移除属性

7.事件操作
事件操作.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容