DOM 的基本概念

DOM：文档对象模型

其实就是操作html中标签的一些能力

比如：

• 获取一个元素（标签）

• 移除一个元素

• 创建一个元素

• 向页面添加一个元素

• 给元素绑定一些事件

• 获取元素的属性

• 给元素添加一些css样式

• ……

DOM的核心 就是document对象

document 对象是JS内置的一个对象，里面存储着专门用来操作元素的各种方法

DOM页面中的标签，我们通过JS获取到以后，就把对象叫做 DOM对象（DOM节点）

DOM元素获取

获取常规元素

通过ID名获取标签

语法：document.getElementById('ID名')

通过class名获取标签

语法：document.getElementsByClassName('class名')

注意：因为页面中可能会有多个元素的class相同，所以获取到的是一组元素

获取后会把元素放在一个长得很像数组一样的数据结构内，但它并不是数组，我们管这种数据结构叫做伪数组

伪数组：长得很像数组，也是通过索引排列，但是没有数组的方法

通过标签名获取

语法：document.getElementsByTagName('标签名')

注意：获取到的也是一个长得很像数组一样的数据结构，其实就是获取到了一个伪数组

想要准确的获取到标签元素，我们需要通过索引来帮助我们拿到

按照选择器的形式来获取元素

querySelector

这个方法允许我们像写css的时候的选择器一样获取标签

注意：这个方法只能获取到一个元素，就是满足条件的第一个元素

语法：document.querySelector('选择器')

querySelectorAll

该方法与querySelector 选择器类似，只不过该方法会将所有满足条件的元素都获取到

也是放在一个伪数组内

语法：document.querySelectorAll('选择器')