JavaScript Document 搜索方法：getElement* 和 querySelector*

在 JavaScript 中，DOM 提供了多种方法来搜索和选择文档中的元素。主要可以分为两大类：getElement* 系列和 querySelector* 系列。

getElement* 系列方法

1. document.getElementById(id)

   • 通过元素的 id 属性获取单个元素
   • 返回一个 Element 对象或 null
   • 示例：document.getElementById('header')

2. document.getElementsByClassName(className)

   • 通过类名获取元素集合
   • 返回一个 HTMLCollection (动态集合)
   • 示例：document.getElementsByClassName('menu-item')

3. document.getElementsByTagName(tagName)

   • 通过标签名获取元素集合
   • 返回一个 HTMLCollection (动态集合)
   • 示例：document.getElementsByTagName('div')

4. document.getElementsByName(name)

   • 通过 name 属性获取元素集合
   • 返回一个 NodeList
   • 示例：document.getElementsByName('username')

querySelector* 系列方法

1. document.querySelector(selector)

   • 使用 CSS 选择器获取第一个匹配的元素
   • 返回一个 Element 对象或 null
   • 示例：document.querySelector('#main .article')

2. document.querySelectorAll(selector)

   • 使用 CSS 选择器获取所有匹配的元素
   • 返回一个 NodeList (静态集合)
   • 示例：document.querySelectorAll('div.highlight')

主要区别

使用建议

• 当只需要通过 id 获取元素时，使用 getElementById 性能最佳
• 当需要复杂选择时，使用 querySelector 或 querySelectorAll 更灵活
• 如果需要获取的元素集合需要实时反映 DOM 变化，使用 getElementsBy* 方法
• 如果只需要一次性的元素快照，使用 querySelectorAll