JavaScript获取DOM元素语法总结（getElementsByName()、querySelector()、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 变化更新。这在动态网页开发中可能影响性能和逻辑设计。

关键引用

• W3Schools JavaScript DOM Elements
• DigitalOcean How To Access Elements in the DOM
• MDN Locating DOM elements using selectors
• W3Schools JavaScript DOM Document
• MDN Document getElementById method
• GeeksforGeeks How to select DOM Elements in JavaScript
• Tutorialspoint JavaScript DOM Elements