获取Dom元素的几种方式的详细解读

JS获取DOM元素的8种方法

1. 通过ID获取（getElementById）
2. 通过name属性（getElementsByName）
3. 通过标签名（getElementsByTagName）
4. 通过类名（getElementsByClassName）
5. 获取html的方法（document.documentElement）
6. 获取body的方法（document.body）
7. 通过选择器获取一个元素（querySelector）（开发常用）
8. 通过选择器获取一组元素（querySelectorAll）（开发常用）

获取对象需要包括 事件源、事件类型、事件处理程序 (事件三要素)

1. 通过ID获取（getElementById）

`let id = document.getElementById('id')`

• 通过id名获取元素，返回值是一个元素对象，没有找到则返回Null
• 如果有多个id重复了，只会获取第一个满足条件的元素对象

2. 通过name属性（getElementsByName）

`document.getElementsByName('name')`

• 通过name名获取元素，返回值是一个伪数组
• 伪数组包含所有符合条件的元素对象，没有找到则返回空数组

3. 通过标签名（getElementsByTagName）

`document.getElementsByTagName('p')`

• 通过标签名获取元素，返回值是一个伪数组
• 伪数组包含所有符合条件的元素对象，没有找到则返回空数组

4. 通过类名（getElementsByClassName）

`document.getElementsByClassName('class')`

• 通过类名获取元素，返回值是一个伪数组
• 伪数组包含所有符合条件的元素对象，没有找到则返回空数组

5. 获取html的方法（document.documentElement）

`document.documentElement`

• document.documentElement是专门获取html这个标签对象的

6. 获取body的方法（document.body）

`document.body`

• document.body是专门获取body这个标签对象的

7. 通过选择器获取一个元素（querySelector）

`document.querySelector('选择器名')`

• 选择器名跟写CSS样式时的命名一致，例如：

    let id = document.querySelector('#id')
    let head = document.querySelector('.head')

• 只获取第一个满足条件的DOM对象，能直接对元素对象进行操作（设置监听等…）
• 有兼容性，不支持i9以下浏览器

8. 通过选择器获取一组元素（querySelectorAll）

`document.querySelectorAll('选择器名')`

• 选择器名跟写CSS样式时的命名一致，例如：

    let span = document.querySelectorAll('span')
    let title = document.querySelectorAll('.title')

• 获取的是包含所有满足条件DOM对象的伪数组，不能直接对伪数组进行操作，必须通过数组名[索引] 或者循环遍历的方式获取到单个元素对象才能进行操作，例如：

    //动态修改所有span盒子内的字体颜色变成红色
    let spans = document.querySelectorAll('span')
    spans.forEach(function(v, i) {
         v.style.color = 'red'
    })

• 有兼容性，不支持i9以下浏览器
• 小拓展：伪数组不是真正的数组，不能使用map，filter循环遍历，只能使用while，do while，for，forEach遍历