JavaScript获取DOM元素语法总结（getElementsByName()、querySelector()、querySelectorAll()）

文章目录

JavaScript DOM 元素获取语法总结
- 关键点
- 简介
- 方法概述
- 详细报告
- - 引言
  - DOM 元素获取方法
  - - 1. getElementById()（弃用）
    - 2. getElementsByClassName()（弃用）
    - 3. getElementsByTagName()（弃用）
    - 4. getElementsByName()
    - 5. querySelector()
    - 6. querySelectorAll()
  - 最佳实践
  - - 使用场景建议
    - 性能考虑
  - 表格总结
  - 意外细节
  - 关键引用

JavaScript DOM 元素获取语法总结

关键点

JavaScript 通过多种方法获取 DOM 元素，包括 getElementById、getElementsByClassName 等。
这些方法适合不同场景，性能和灵活性各有优劣。
研究表明，getElementById 是最快的，但 querySelector 更灵活。

简介

DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，表现为网页结构的树状对象，每个对象对应页面的一部分，如 HTML 元素。获取 DOM 元素是交互式网页开发的核心，用于修改内容、样式或行为。

方法概述

JavaScript 提供了以下主要方法来获取 DOM 元素：

document.getElementById(id)：按 ID 获取单个元素。
document.getElementsByClassName(classNames)：按类名获取多个元素。
document.getElementsByTagName(tagName)：按标签名获取多个元素。
document.getElementsByName(name)：按 name 属性获取多个元素。
document.querySelector(cssSelector)：按 CSS 选择器获取第一个匹配元素。
document.querySelectorAll(cssSelector)：按 CSS 选择器获取所有匹配元素。

详细报告

引言

DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，表现为网页结构的树状对象，每个对象对应页面的一部分，如 HTML 元素。获取 DOM 元素是交互式网页开发的核心，用于修改内容、样式或行为。JavaScript 提供了多种方法来选择和操作这些元素，适合不同场景，性能和灵活性各有优劣。

DOM 元素获取方法

以下是 JavaScript 中获取 DOM 元素的主要方法，每个方法都有其特定的使用场景和性能特点：

1. getElementById()（弃用）

语法：document.getElementById(id)
说明：返回指定 ID 的元素。ID 在文档中是唯一的，因此该方法返回单个元素或 null（如果没有匹配的元素）。

示例：

<div id="myDiv">Hello</div>
<script>
const div = document.getElementById("myDiv");
console.log(div); // 输出 div 元素
</script>

特点：研究表明，这是最快的获取元素方法，因为 ID 是唯一的，浏览器可以快速定位。

2. getElementsByClassName()（弃用）

语法：document.getElementsByClassName(classNames)
说明：返回一个实时 HTMLCollection，包含所有具有指定类名的元素。如果传递多个类名（用空格分隔），则返回同时具有所有这些类的元素。

示例：

<div class="container main">Hello</div>
<div class="container">World</div>
<script>
const elements = document.getElementsByClassName("container");
console.log(elements); // 输出两个 div 元素
</script>

特点：集合是实时的，DOM 变化时会自动更新。适合需要按类名批量操作元素。

3. getElementsByTagName()（弃用）

语法：document.getElementsByTagName(tagName)
说明：返回一个实时 HTMLCollection，包含所有指定标签名的元素。

示例：

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<script>
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs); // 输出两个 p 元素
</script>

特点：适合按标签类型批量获取元素，集合也是实时的。

4. getElementsByName()

语法：document.getElementsByName(name)
说明：返回一个实时 NodeList，包含所有具有指定 name 属性的元素。name 属性通常用于表单元素，不保证唯一性。

示例：

<input type="text" name="username">
<input type="password" name="username">
<script>
const elements = document.getElementsByName("username");
console.log(elements); // 输出两个 input 元素
</script>

特点：较少使用，适合表单相关操作。

5. querySelector()

语法：document.querySelector(cssSelector)
说明：返回第一个匹配指定 CSS 选择器的元素。如果没有匹配，返回 null。

示例：

<div class="container">Div 1</div>
<div class="container">Div 2</div>
<script>
const firstDiv = document.querySelector(".container");
console.log(firstDiv); // 输出第一个 class 为 container 的 div
</script>

特点：灵活，支持复杂 CSS 选择器，适合现代开发。

6. querySelectorAll()

语法：document.querySelectorAll(cssSelector)
说明：返回一个静态 NodeList，包含所有匹配指定 CSS 选择器的元素。如果没有匹配，返回空列表。

示例：

<div class="container">Div 1</div>
<div class="container">Div 2</div>
<script>
const divs = document.querySelectorAll(".container");
console.log(divs); // 输出两个 class 为 container 的 div
</script>

特点：返回的列表是静态的，不随 DOM 变化更新，适合需要固定列表的场景。

最佳实践

使用场景建议

getElementById()：当需要快速访问单个唯一元素时使用。
getElementsByClassName()：当需要按类名批量操作多个元素时使用。
getElementsByTagName()：当需要按标签类型批量获取元素时使用。
getElementsByName()：当需要按 name 属性操作表单元素时使用。
querySelector()：当需要使用复杂 CSS 选择器查找第一个匹配元素时使用。
querySelectorAll()：当需要使用 CSS 选择器查找所有匹配元素时使用。

性能考虑

getElementById() 是最快的，因为 ID 是唯一的，浏览器可以快速定位。
querySelector 和 querySelectorAll 效率高且灵活，适合现代开发。
getElementsByClassName 和 getElementsByTagName 返回的集合是实时的，适合动态 DOM 场景；querySelectorAll 返回静态列表，适合固定列表需求。
为了优化性能，建议选择器尽可能具体，减少浏览器需要检查的元素数量。例如，使用 document.getElementById("id").querySelector("selector") 比 document.querySelector("#id selector") 更高效。

表格总结

以下表格总结各方法的特性：

方法名	返回类型	是否实时	适用场景
getElementById	Element 或 null	否	按 ID 获取单个唯一元素
getElementsByClassName	HTMLCollection	是	按类名批量获取多个元素
getElementsByTagName	HTMLCollection	是	按标签名批量获取多个元素
getElementsByName	NodeList	是	按 name 属性获取表单元素
querySelector	Element 或 null	否	按 CSS 选择器获取第一个匹配
querySelectorAll	NodeList	否	按 CSS 选择器获取所有匹配

意外细节

一个意外的细节是，getElementsByClassName 和 getElementsByTagName 返回的集合是实时的，这意味着如果 DOM 发生变化，集合会自动更新，而 querySelectorAll 返回的列表是静态的，不随 DOM 变化更新。这在动态网页开发中可能影响性能和逻辑设计。