常见的原始JS选择器使用方法总结

选择器是 JavaScript 编程中非常重要的一部分。选择器是用于访问和操作文档中的 HTML 元素的方法。

在 JavaScript 中，有多种类型的选择器，其中包含了基础选择器、层级选择器、伪选择器等。本文将总结常见的原始 JavaScript 选择器使用方法。

基础选择器

基础选择器是 JavaScript 中最常用的选择器，主要用于选择与指定规则相匹配的单个元素。以下是常见的一些基础选择器：

1. 通过 ID 选择器获取元素

通过 ID 选择器可以仅通过指定元素的 ID 属性来选择该元素，使用方法： document.getElementById('id名称')。

示例代码：

// 获取id为demo的div元素
var demoDiv = document.getElementById('demo');

2. 通过 class 选择器获取元素

通过 class 选择器可以选中具有与指定 class 属性名称相同的所有元素，使用方法： document.getElementsByClassName('类名')。

示例代码：

// 获取class为demo的所有元素
var demoEles = document.getElementsByClassName('demo');

3. 通过标签名选择器获取元素

通过标签名选择器可以选中指定名称的所有元素，使用方法： document.getElementsByTagName('标签名')。

示例代码：

// 获取所有p元素
var pEles = document.getElementsByTagName('p');

层级选择器

层级选择器是用于选择 HTML 元素中的某个层级元素的选择器。以下是常见的一些层级选择器：

1. 通过直接子元素选取

选择一个元素的直接子元素，使用方法： document.querySelector('父元素 > 直接子元素')。

示例代码：

// 选择id为container的直接子元素中的第一个div元素
var firstDiv = document.querySelector('#container > div:nth-child(1)');

2. 通过后代元素选取

选择一个元素的后代元素，使用方法： document.querySelector('祖先元素 后代元素')。

示例代码：

// 选择class为demo的div元素中的第一个p元素
var firstPEle = document.querySelector('.demo p:nth-child(1)');

伪选择器

伪选择器是一种高级的选择器，用于根据选择器的状态来选择元素。以下是常见的一些伪选择器：

1. 通过 :hover 选取鼠标悬停状态的元素

选择鼠标悬停的元素，使用方法： document.querySelectorAll('选择器:hover')。

示例代码：

// 选取所有鼠标悬停在a元素上的元素
var hoverEles = document.querySelectorAll('a:hover');

2. 通过 :checked 选取被选中的元素

选择被选中的元素，使用方法： document.querySelectorAll('选择器:checked')。

示例代码：

// 选取所有被选中的input元素
var checkedInputEles = document.querySelectorAll('input:checked');

结论

此篇文章总结了 JavaScript 中常见的一些选择器的使用方法，这些选择器可以帮助开发人员选择和操作 HTML 中的元素。开发人员可以根据需要选择适当的选择器。