JavaScript DOM中获取元素的四种方法

目录

JavaScript常见的获取元素的方法

1.通过ID获取（getElementById）

2.通过name属性（getElementsByName）

3.通过标签名（getElementsByTagName）

4.通过类名（getElementsByClassName

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

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

---

JavaScript常见的获取元素的方法

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

1.通过ID获取（getElementById）

document.getElementById('id')

1. 上下文必须是document。
2. 必须传参数，参数是string类型，是获取元素的id。
3. 返回值只获取到一个元素，没有找到返回null。

2.通过name属性（getElementsByName）

document.getElementsByName('name')

1. 上下文必须是document。内容
2. 必须传参数，参数是是获取元素的name属性。
3. 返回值是一个类数组，没有找到返回空数组。

3.通过标签名（getElementsByTagName）

var obj = document.getElementsByTagName('div');
for(let i = 0; i<obj.length; i++){
        obj[i].onclick = function(e){
            console.log(i)
        }
    }

1. 上下文可以是document，也可以是一个元素，注意这个元素一定要存在。
2. 参数是是获取元素的标签名属性，不区分大小写。
3. 返回值是一个类数组，没有找到返回空数组

4.通过类名（getElementsByClassName

var obj1 = document.getElementsByClassName('animated')
// console.log
0:div.app.animated
1:div#login.login.animated.rubberBand
2:div#reg.reg.animated.shake
3:div#kefu.kefu.animated.swing
4:div#LoginState.state.animated.bounce
5:div.loginState.animated
6:div.regState.animated
7:div.pop.animated

1. 上下文可以是document，也可以是一个元素。
2. 参数是元素的类名。
3. 返回值是一个类数组，没有找到返回空数组。

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

document.querySelector('.animated')

1. 上下文可以是document，也可以是一个元素。
2. 参数是选择器，如：”div .className”。
3. 返回值只获取到第一个元素。

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

document.querySelector('.animated')

1. 上下文可以是document，也可以是一个元素。
2. 参数是选择器，如：”div .className”。
3. 返回值是一个类数组。