DOM节点操作

yeahSan

于 2022-10-31 20:00:32 发布

阅读量181

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_65729457/article/details/127622190

版权

这篇博客详细介绍了DOM文档对象模型，包括DOM树的概念、DOM操作元素样式的方法，特别是classList属性的使用，以及DOM中节点的各种操作，如获取节点、追加节点。重点讨论了childNode和children属性的区别，并给出了动态添加和删除类名的示例。

摘要由CSDN通过智能技术生成

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

<div class="d1 s1 s2 s3 s4" id="dt"></div>
    <!-- <button id="btn_class">class样式列表</button> -->
    <button id="btn_center">居中</button>
    <button id="btn_remove">恢复</button>
    <button id="btn_toggle">交替</button>
    <button id="btn_item