18.JS中DOM的基本概念和获取元素的方法
1.DOM的基本概念
- DOM 是文本对象模型,其实就是操作 html 的一些能力
- 例如:
- 获取一个元素(标签)
- 移除一个元素
- 创建一个元素
- 向页面添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些css样式
- ......
- DOM 的核心就是 document 对象,里面存储着专门用来操作元素的各种方法
- DOM:页面中的标签,通过 JS 获取之后,我们就把这个对象叫做 DOM 对象(DOM节点)
2.获取元素的方法
2.1 html标签
- 语法:
document.documentElement
2.2 head标签
2.3 body标签
2.4 通过 ID 名获取标签
- 语法:
document.getElementById('ID名')
2.5 通过 class 名获取标签
- 语法:
document.getElementsByClassName('class名')
- 注意:因为页面中可能有多个 class 名相同,所以获取到的是一组元素,将其放到伪数组内,想要获取准确的元素,需要索引来解决
2.6 通过标签名获取标签
- 语法:
document.getElementsByTagName('标签名')
- 注意:因为页面中可能有多个标签名相同,所以获取到的是一组元素,将其放到伪数组内,想要获取准确的元素,需要索引来解决
2.7 通过选择器来获取(单个)
- 语法:
document.querySelecotr('选择器')
- 注意:这个方法只允许我们像写 css 的时候的选择器一样获取标签,且只能获取一个元素,及满足条件的第一个元素
2.8 通过选择器来获取(多个)
- 语法:
document.querySelecotrAll('选择器')
- 注意:该方法与 querySelecotr 类似,但会获取所有满足条件的元素,并将其放在一个伪数组内
