原生 js 选择器

在原生 JavaScript 中，选择器主要用于获取 DOM（文档对象模型）中的元素。以下是一些常用的选择器及其相关概念：

基础概念

getElementById(): 通过元素的 id 属性获取元素。
getElementsByClassName(): 通过元素的 class 属性获取元素集合。
getElementsByTagName(): 通过标签名获取元素集合。
querySelector(): 使用 CSS 选择器语法获取第一个匹配的元素。
querySelectorAll(): 使用 CSS 选择器语法获取所有匹配的元素集合。

优势

灵活性：querySelector 和 querySelectorAll 支持复杂的 CSS 选择器，使得选择元素更加灵活。
简洁性：相比传统的选择器方法，querySelector 和 querySelectorAll 提供了更简洁的语法。
性能：对于简单的选择，getElementById 是最快的方法。

类型

ID 选择器：document.getElementById('elementId')
类选择器：document.getElementsByClassName('className') 或 document.querySelector('.className')
标签选择器：document.getElementsByTagName('tagName') 或 document.querySelector('tagName')
属性选择器：document.querySelector('[attribute="value"]')
伪类选择器：document.querySelector(':hover')（注意：:hover 等伪类在 JavaScript 中使用时需要特定的上下文）

应用场景

动态内容更新：通过选择器获取元素后，可以动态更新其内容或样式。
事件绑定：通过选择器获取元素后，可以为其绑定事件监听器。
表单验证：通过选择器获取表单元素，进行验证操作。

示例代码

// ID 选择器
const elementById = document.getElementById('myId');
console.log(elementById);

// 类选择器
const elementsByClass = document.getElementsByClassName('myClass');
console.log(elementsByClass);

// 标签选择器
const elementsByTag = document.getElementsByTagName('div');
console.log(elementsByTag);

// querySelector
const firstDiv = document.querySelector('div');
console.log(firstDiv);

// querySelectorAll
const allDivs = document.querySelectorAll('div');
allDivs.forEach(div => console.log(div));

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

// 伪类选择器（需要特定上下文）
document.querySelector('button').addEventListener('mouseover', function() {
  console.log('Button is hovered');
});

常见问题及解决方法

选择器返回 null：
- 原因：元素尚未加载完成，或者选择器语法错误。
- 解决方法：确保在 DOM 加载完成后执行选择器代码，例如放在 window.onload 事件中，或者使用 DOMContentLoaded 事件。
- 解决方法：确保在 DOM 加载完成后执行选择器代码，例如放在 window.onload 事件中，或者使用 DOMContentLoaded 事件。

选择器返回多个元素：
- 原因：使用了返回集合的选择器方法，如 getElementsByClassName 或 querySelectorAll。
- 解决方法：遍历集合，或者使用 querySelector 获取第一个匹配的元素。
- 解决方法：遍历集合，或者使用 querySelector 获取第一个匹配的元素。
选择器语法错误：
- 原因：CSS 选择器语法错误，例如拼写错误或使用了不支持的选择器。
- 解决方法：检查选择器语法，确保其正确无误。
- 解决方法：检查选择器语法，确保其正确无误。