当前位置：首页 > JavaScript

js实现选择器

2026-01-30 08:55:43JavaScript

实现基础选择器

使用 document.querySelector 或 document.querySelectorAll 实现类似 CSS 的选择器功能。前者返回第一个匹配元素，后者返回所有匹配的 NodeList。

// 选择单个元素  
const element = document.querySelector('#id');  
const element = document.querySelector('.class');  
const element = document.querySelector('div');  

// 选择所有匹配元素  
const elements = document.querySelectorAll('.class');

按属性选择元素

通过属性选择器定位元素，支持精确匹配或部分匹配。

js实现选择器

// 精确匹配属性  
const links = document.querySelectorAll('a[href="https://example.com"]');  

// 匹配属性包含特定值  
const icons = document.querySelectorAll('[class*="icon-"]');  

// 匹配属性以特定值开头  
const inputs = document.querySelectorAll('input[type^="text"]');

层级与组合选择器

通过组合选择器实现更复杂的层级关系匹配。

js实现选择器

// 子元素选择  
const listItems = document.querySelectorAll('ul > li');  

// 相邻兄弟选择  
const nextButton = document.querySelector('.submit + button');  

// 通用兄弟选择  
const allSiblings = document.querySelectorAll('h1 ~ p');

伪类与动态选择

利用伪类选择器匹配动态状态或特定位置的元素。

// 匹配悬停状态的元素（需通过事件监听实现）  
element.addEventListener('mouseover', () => {  
  element.style.color = 'red';  
});  

// 选择第一个子元素  
const firstChild = document.querySelector('li:first-child');  

// 选择第 n 个元素  
const thirdItem = document.querySelector('li:nth-child(3)');

性能优化建议

避免频繁使用复杂选择器或全局扫描，优先通过 ID 或类名缩小范围。

// 不推荐：全局扫描  
const slow = document.querySelectorAll('div span.highlight');  

// 推荐：限定范围  
const container = document.getElementById('app');  
const fast = container.querySelectorAll('span.highlight');

通过以上方法，可以灵活实现各种 DOM 元素选择需求。