JS获取HTML DOM元素的方法

Answer 1

文档对象模型（DOM）是W3C组织推荐的处理可扩展置标语言的标准编程接口，用于获取、修改、添加或删除HTML元素。在JavaScript中，所有对网页的操作都是通过DOM完成的。

本文将总结几种获取DOM元素的方法：

1. 通过ID获取元素（getElementById）：使用document.getElementById('id')，必须传入元素的ID，返回一个元素，未找到时返回null。注意，如果有多个ID存在，只获取第一个；IE6、7中会将表单元素的name值当作ID获取；大小写不敏感；不推荐直接用ID代表元素；上下文必须是document。

2. 通过name属性获取元素（getElementsByName）：使用document.getElementsByName('name')，同样必须传入元素的name，返回一个类数组，未找到返回空数组。注意，获取结果为类数组而非数组；仅在IE中可获取表单元素，从IE10开始可以获取非表单元素；上下文必须是document。

3. 通过标签名获取元素（getElementsByTagName）：使用document.getElementsByTagName('p')或某个元素的getElementsByTagName方法，参数为标签名，返回类数组，未找到返回空数组。注意，获取结果为类数组，上下文可为document或元素，不区分大小写。

4. 通过类名获取元素（getElementsByClassName）：使用document.getElementsByClassName('className')，参数为元素的类名，返回类数组，未找到返回空数组。注意，获取结果为类数组；IE8及以前版本不兼容。

5. 获取HTML元素（document.documentElement）：专门获取HTML标签。

6. 获取body元素（document.body）：专门获取body标签。

7. 使用选择器获取一个元素（querySelector）：使用document.querySelector('div .className')，参数为选择器，返回一个元素，不兼容IE7及以前版本。

8. 使用选择器获取一组元素（querySelectorAll）：使用document.querySelectorAll('div .className')，参数为选择器，返回类数组，不兼容IE7。

以上方法涵盖了通过ID、name、标签名、类名以及选择器获取DOM元素，注意兼容性及上下文限制。