JS中获取DOM的方法

左手的ㄟ右手 2022-06-05 01:15 211阅读 0赞

**getElementById**通过元素ID获取

此方法的上下文只能是document。

> 一个HTML页面中元素的ID理论上是不能重复的，但是重复了页面中也不会报错  
> 1、如果页面中的ID重复了，我们获取的是第一个ID对应的元素对象。  
> 2、在IE7及更低版本浏览器中，会把表单元素的name值当做ID来识别。（**`项目中尽量不要让表单的name和其他的元素的ID相同`**）  
> 3、`如果我们把JS放在结构的下面，我们可以直接使用ID值获取这个元素（不需要通过getElementById获取），而且这种方式会把页面中所有ID是他的元素都获取到（元素对象/元素集合） ===》 此方法不推荐`

**getElementsByTagName** 通过元素标签名获取

此方法的上下文可以自己来定的

> 获取到的结果是一个元素集合（类数组集合）
> 
> 1、获取的结果是集合，哪怕集合中只有一项，我们想要操作的是这一项（元素对象），需要先从集合中获取出来，然后再操作。  
> 2、在指定的上下文中，获取所有子子孙孙元素中标签名叫做这个的(后代筛选)

**getElementsByClassName** 通过元素的类名获取

上下文可以随意指定  
获取的结果是一个类数组

> 1、真实项目中我们经常会通过样式类名来获取元素，getElementsByClassName这个方法在IE6~8浏览器中是不兼容的

**getElementsByName** 通过元素的name属性获取

> 通过元素的name属性值获取一组元素（类数组：节点集合 NodeList）  
> **它的上下文也只能是document**  
> IE浏览器只能识别表单元素的name属性值，所以我们这个方法一般都是用来操作表单元素的

**document.documentElement / document.body**  
获取HTML或者BODY（一个元素对象）  
获取一屏的高度

document.documentElement.clientWidth||document.body.clientWidth 
    //clientHeight  JS中操作盒子模型的属性，获取可是区域的高度。

**querySelector / querySelectorAll**

> 在IE6~8下不兼容，而且也没什么特别好办法处理它的兼容，所以这两个方法一般多用于移动端开发使用
> 
> querySelector：获取一个元素对象
> 
> querySelectorAll：获取的是一个元素集合
> 
> 只要是CSS支持的选择器，这里大部分都支持