js获取元素的方式与区别

js获取元素的方式与区别

1、 根据id获取元素

语法：

document.getElementById('id')

作用：根据ID获取元素对象

参数：id值，区分大小写的字符串

返回值：元素对象或null(如果页面中没有这个唯一标识的id，则返回一个null)

案例：

2、根据标签名获取元素

语法：

document.getElementsByTagName('标签名') 

作用: 获取页面中所有改标签

参数：标签名

返回值：得到一个对象，是伪数组（并不是真的数组，和数组类似），里面放的是各个元素

案例：

注意：

1. 得到的是一个对象的集合，所以要想操作里面的元素，需要遍历
2. 得到元素对象是动态的

3. 根据类名获取元素

语法：

document.getElementsByClassName('类名')

作用：获取相同类名的元素对象

参数：类名

返回值：得到一个伪数组，存放所获取的元素对象或者空数组

案例：

4. querySelector()获取元素

语法：

document.querySelector('选择器') //括号里面是css的属性选择器

作用：通过指定选择器获取第一个元素

参数：指定选择器

返回值：返回指定选择器的第一个元素对象

案例：

5. querySelectorAll()获取元素对象集合

语法:

document,querySelectorAll('选择器')

作用：通过指定选择器获取所有元素对象集合

参数：指定选择器

返回值：返回指定选择器的所有元素对象集合。

案例：

6. 获取特殊元素(body, html)

1. 获取body元素

document.body //返回body元素对象

2. 获取html元素

document.documentElement //返回html元素对象

案例：