原生 JavaScript 选择器 超详细教程

原生 JS 提供了两套核心选择器体系：传统 DOM 选择器（getElement* 系列）和 现代 CSS 选择器（querySelector* 系列）。

我会按用法、区别、示例、场景全维度讲清楚，你可以直接复制代码测试。

一、传统 DOM 选择器（getElement* 系列）

特点：

• 历史最久、兼容性最好（IE6+ 都支持）
• 返回动态集合（元素变化时自动更新）
• 性能略优于现代选择器
• 命名固定：getElement + 后缀

1. document.getElementById(id)

作用：通过 id 获取单个元素（唯一）
返回：单个 DOM 元素 / null
语法：

// 获取 id 为 box 的元素
const box = document.getElementById('box');

注意：

• 直接传 id 名称，不用加 #
• id 唯一，所以永远只返回一个元素

2. document.getElementsByTagName(tagName)

作用：通过 标签名 获取元素集合
返回：HTMLCollection（动态集合）
语法：

// 获取所有 p 标签
const pList = document.getElementsByTagName('p');

// 获取第一个 p 标签
const firstP = pList[0];

注意：

• 标签名不区分大小写
• 返回类数组，必须用下标 [0] [1] 取值

3. document.getElementsByClassName(className)

作用：通过 class类名 获取元素集合
返回：HTMLCollection（动态集合）
语法：

// 获取所有 class="item" 的元素
const items = document.getElementsByClassName('item');

注意：

• 直接传类名，不用加 .
• 可传多个类名（空格分隔）

4. document.getElementsByName(name)

作用：通过 name 属性 获取元素（多用于表单）
返回：NodeList（动态集合）
语法：

// 获取 name="hobby" 的表单元素
const hobbies = document.getElementsByName('hobby');

二、现代 CSS 选择器（querySelector* 系列）

特点：

• 完全支持 CSS 选择器语法（# . > + [] 等都能用）
• 写法统一、超级灵活
• 返回静态集合（不会自动更新）

1. document.querySelector(selector)

作用：获取匹配的第一个元素
返回：单个 DOM 元素 / null
语法：

// id 选择器
const box = document.querySelector('#box');

// class 选择器
const item = document.querySelector('.item');

// 标签选择器
const p = document.querySelector('p');

// 复合选择器
const navItem = document.querySelector('nav .item');

// 属性选择器
const input = document.querySelector('input[type="text"]');

2. document.querySelectorAll(selector)

作用：获取所有匹配的元素
返回：静态 NodeList
语法：

// 获取所有 .item 元素
const items = document.querySelectorAll('.item');

// 获取所有 div 下的 p 元素
const divPs = document.querySelectorAll('div > p');

遍历方法：

items.forEach(item => {
  console.log(item);
});

三、两套选择器核心区别（面试常考）

重点：

• 动态集合：页面元素变化，变量自动跟着变
• 静态集合：获取后就固定，不会自动更新

四、最实用的使用场景

1. 快速获取单个元素

// 推荐
const dom = document.querySelector('#id');
const dom = document.querySelector('.class');

2. 快速获取多个元素

// 推荐
const list = document.querySelectorAll('.item');

3. 兼容 IE6/7 必须用

document.getElementById()
document.getElementsByTagName()

4. 表单专用

document.getElementsByName('username')

五、完整测试代码（可直接运行）

<div id="box">我是 id 盒子</div>
<div class="item">我是 class 项目1</div>
<div class="item">我是 class 项目2</div>
<p>我是段落</p>

<script>
// 1. 传统选择器
const box = document.getElementById('box');
const items = document.getElementsByClassName('item');
const p = document.getElementsByTagName('p')[0];

// 2. 现代选择器
const box2 = document.querySelector('#box');
const allItems = document.querySelectorAll('.item');

console.log(box);
console.log(allItems);
</script>

六、总结

1. 日常开发首选：querySelector / querySelectorAll（灵活、写法统一）
2. 需要动态更新：用 getElement* 系列
3. 兼容老旧浏览器：只用 getElementById / getElementsByTagName
4. 表单元素：用 getElementsByName

原生 JS 选择器 · 速查表（极简可直接背）

一、传统选择器（getElement*）

1. document.getElementById('id名')

• 不用加 #
• 返回：单个元素 / null
• 唯一、最快、兼容最好

const box = document.getElementById('box');

2. document.getElementsByTagName('标签名')

• 返回：HTMLCollection（动态集合）
• 类数组，必须 [索引] 取值

const divs = document.getElementsByTagName('div');
const firstDiv = divs[0];

3. document.getElementsByClassName('类名')

• 不用加 .
• 可多个类名：'a b'
• 返回：HTMLCollection（动态集合）

const items = document.getElementsByClassName('item');

4. document.getElementsByName('name属性')

• 多用于表单（单选、复选、input）
• 返回：NodeList

const hobbies = document.getElementsByName('hobby');

二、现代 CSS 选择器（querySelector*）

1. document.querySelector('CSS选择器')

• 获取匹配到的第一个元素
• 支持：# . 标签 [属性] 空格 > + 等

document.querySelector('#box')
document.querySelector('.item')
document.querySelector('div p')
document.querySelector('input[type="text"]')

2. document.querySelectorAll('CSS选择器')

• 获取所有匹配元素
• 返回：静态 NodeList
• 支持 .forEach()

const list = document.querySelectorAll('.item');
list.forEach(el => { console.log(el) });

三、一句话区别（面试必背）

• getElement 系列*

  • 动态集合（页面变，集合自动变）
  • 性能略高
  • 语法死板

• querySelector 系列*

  • 静态集合（快照，获取后不再变）
  • 写法灵活，支持完整 CSS 选择器
  • 日常开发优先用这个

四、高频简写对照

五、避坑要点

1. getElement* 不加 # .；querySelector 必须加
2. 集合类型不能直接操作 DOM，要 [0] 或遍历
3. 动态集合会实时更新，容易导致死循环
4. querySelectorAll 不实时更新，更安全稳定