【JS笔记】JS中的DOM对象以及通过JS获取DOM结点，操作DOM属性、DOM增删改查

这篇文章，主要介绍JS中的DOM对象以及通过JS获取DOM结点，操作DOM属性、DOM增删改查​​​​​​​。

目录

一、JS中的DOM

1.1、什么是DOM

1.2、获取DOM结点

（1）获取html

（2）获取head

（3）获取body

（4）通过id获取DOM结点

（5）通过class获取DOM结点

（6）通过标签名称获取DOM结点

（7）通过name属性获取DOM结点

（8）querySelector()获取DOM结点

（9）querySelectorAll()获取DOM结点

 1.3、JS操作DOM元素属性

（1）innerHTML属性

（2）表单属性

（3）操作自定义属性

（4）获取H5的自定义属性

（6）innerText操作文本

（7）style样式属性

（8）className和classList属性

1.4、操作DOM节点

（1）节点属性

（2）DOM节点增删改查

（3）节点类型

（4）获取元素尺寸

（5）获取元素偏移量

（6）获取窗口可视宽高

---

一、JS中的DOM

1.1、什么是DOM

DOM，全称是：Document Object Model，文档对象模型，它主要是用于描述HTML文档对象的。

一个HTML页面是由许多的标签组成的，例如：html、head、body、div等等标签元素，JS里面将整个的HTML作为一个document文档来进行管理，其中HTML里面的每一个标签都是一个DOM结点。

HTML里面所有的DOM结点构成了一颗DOM树，这就有点类似于二叉树了，只不过DOM里面的树是多叉树，因为HTML里面的标签里面可以嵌套许多其他的标签。

JS去操作DOM结点，它是将操作的HTML作为一个DOM对象来进行管理的，JS可以进行很多的DOM操作，例如：获取某个标签元素、移除DOM结点、创建DOM结点、给DOM结点绑定事件、设置属性、设置样式等等操作，这就是JS的强大之处。

DOM对象的核心是