js实现选择器
实现选择器的常见方法
在JavaScript中，选择器用于选取DOM元素，以下是几种常见的方法：
document.getElementById()
通过元素的ID属性选取单个元素。
const element = document.getElementById('myId');document.querySelector()
使用CSS选择器选取第一个匹配的元素。
const element = document.querySelector('.myClass');document.querySelectorAll()
使用CSS选择器选取所有匹配的元素，返回一个NodeList。
const elements = document.querySelectorAll('div');document.getElementsByClassName()
通过类名选取所有匹配的元素，返回一个HTMLCollection。
const elements = document.getElementsByClassName('myClass');document.getElementsByTagName()
通过标签名选取所有匹配的元素，返回一个HTMLCollection。
const elements = document.getElementsByTagName('div');选择器的进阶用法
组合选择器
可以通过组合选择器更精确地选取元素。
const element = document.querySelector('div.myClass');属性选择器
通过元素的属性选取元素。
const element = document.querySelector('[data-attr="value"]');伪类选择器
使用伪类选择器选取元素。
const element = document.querySelector('div:hover');动态选择器
事件委托
通过事件委托动态选取元素。
document.addEventListener('click', function(event) {
if (event.target.matches('.myClass')) {
console.log('Element clicked');
}
});MutationObserver
监听DOM变化动态选取元素。
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
const elements = document.querySelectorAll('.myClass');
}
});
});
observer.observe(document.body, { childList: true, subtree: true });性能优化建议
避免频繁使用复杂的选择器，尤其是在循环中。缓存选择器的结果以提高性能。
const elements = document.querySelectorAll('.myClass');
elements.forEach(function(element) {
console.log(element);
});
