详解JS获取HTML DOM元素的8种方法

HTML DOM简介

HTML DOM即文档对象模型（Document Object Model），它是W3C组织推荐的处理可扩展置标语言的标准编程接口。

文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。

本文旨在总结各种获取方法的具体用法及常见陷阱，不进行过于深入的理论探讨。

JavaScript中获取DOM元素主要有以下8种方法：

1. 1. 通过ID获取（getElementById）
2. 2. 通过name属性获取（getElementsByName）
3. 3. 通过标签名获取（getElementsByTagName）
4. 4. 通过类名获取（getElementsByClassName）
5. 5. 获取html根元素（document.documentElement）
6. 6. 获取body元素（document.body）
7. 7. 通过CSS选择器获取单个元素（querySelector）
8. 8. 通过CSS选择器获取元素集合（querySelectorAll）

接下来我们将逐一讲解上述方法的具体实现。

获取DOM元素的8种方法详解

1. 通过ID获取（getElementById）

document.getElementById('id')

基本用法如下：

首先，调用该方法的上下文必须是document对象。

其次，必须传入一个参数，该参数为string类型，代表目标元素的id属性值。

返回值方面，该方法仅返回找到的第一个元素；若未找到匹配元素，则返回null。

需要注意的陷阱包括：

如果页面中存在多个相同id的元素，该方法仅返回最先出现的那个。虽然规范建议id唯一，但实际开发中需留意此行为。

在IE6和IE7浏览器中，表单元素的name属性会被当作id值进行匹配获取，因此定义元素属性时需特别注意。

在IE6和IE7浏览器中，id匹配不区分大小写。

在部分旧版浏览器中，可以直接使用元素的id作为全局变量来代表该元素（项目中不推荐此做法）。

通过ID获取元素的上下文严格限制为document。这是因为getElementById方法定义在Document类的原型上，而非Element类，因此其他DOM节点无法调用此方法。

2. 通过name属性获取（getElementsByName）

document.getElementsByName('name')

基本用法如下：

调用该方法的上下文必须是document对象。

必须传入一个参数，该参数为string类型，代表目标元素的name属性值。

返回值是一个类数组对象（NodeList）；若未找到匹配元素，则返回一个空数组。

需要注意的陷阱包括：

返回值是类数组对象，并非真正的Array实例，因此不具备数组的所有方法。

在IE浏览器中，该方法仅能获取表单元素；从IE10开始，支持获取非表单元素。通常我们使用该方法主要是为了获取表单控件。

上下文必须是document，原因与getElementById相同，该方法定义在Document原型上。

3. 通过标签名获取（getElementsByTagName）

document.getElementsByTagName('p');
var oDiv = document.getElementById('divId');
oDiv.getElementsByTagName('p');

基本用法如下：

上下文既可以是document，也可以是具体的DOM元素节点，但后者必须存在。

参数为string类型，代表要获取的标签名，匹配时不区分大小写。

返回值是一个类数组对象（HTMLCollection）；若未找到匹配元素，则返回一个空数组。

需要注意的陷阱包括：

返回值同样是类数组对象，而非标准数组。

该方法不局限于document上下文。因为getElementsByTagName既定义在Document类的原型上，也定义在Element类的原型上，所以document对象和具体的DOM元素节点均可调用此方法。

4. 通过类名获取（getElementsByClassName）

用法与getElementsByTagName类似：

上下文既可以是document，也可以是具体的DOM元素节点。

参数为string类型，代表要获取的类名。

返回值是一个类数组对象；若未找到匹配元素，则返回一个空数组。

需要注意的陷阱包括：

返回值是类数组对象，而非标准数组。

该方法在IE8及更早版本中不兼容，这是其主要局限性。

5. 获取html根元素（document.documentElement）

document.documentElement属性专门用于获取HTML文档中的html标签元素。

6. 获取body元素（document.body）

document.body属性专门用于获取HTML文档中的body标签元素。

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

基本用法如下：

上下文既可以是document，也可以是具体的DOM元素节点。

参数为CSS选择器字符串，例如"div .className"。

返回值仅返回匹配的第一个元素。

需要注意的陷阱包括：

该方法不兼容IE7及更早版本。鉴于当前主流浏览器环境，通常无需考虑对IE7的兼容。

8. 通过CSS选择器获取元素集合（querySelectorAll）

用法与querySelector类似：

上下文既可以是document，也可以是具体的DOM元素节点。

参数为CSS选择器字符串，例如"div .className"。

返回值是一个类数组对象（NodeList），包含所有匹配的元素。

需要注意的陷阱包括：

与querySelector相同，该方法不兼容IE7及更早版本。

方法适用上下文的原理分析

以上介绍了使用原生JavaScript获取DOM元素的8种方法。接下来，我们将探讨为什么部分方法只能在document上调用。

以div元素为例，它是HTMLDivElement类的实例；而document对象是HTMLDocument类的实例。

它们的继承关系如下：

HTMLDivElement继承自HTMLElement，进而继承Element、Node，最终继承EventTarget。

HTMLDocument继承自Document，进而继承Node，最终继承EventTarget。

根据面向对象原理，子类可以继承并使用父类的属性和方法。

这两条继承链的共同节点是Node和EventTarget，因此它们都可以使用定义在Node和EventTarget上的方法。

例如Node上的nodeName、parentNode属性，以及EventTarget上的addEventListener方法。

由于getElementById仅定义在Document类的原型上，而HTMLDivElement并未继承Document类，因此div元素无法调用getElementById方法。相反，getElementsByTagName既定义在Document原型上，也定义在Element原型上，所以div和document都可以使用该方法。

其他方法的适用性同理可推。

以上就是本文的全部内容，希望这对大家的学习有所帮助，也欢迎大家支持本站。