JavaScript里的querySelector和querySelectorAll

在JavaScript的DOM操作领域，querySelector和querySelectorAll是两个强大且常用的方法，它们极大地提升了开发者获取页面元素的效率。

querySelector方法用于返回文档中匹配指定CSS选择器的第一个元素。语法非常简单：document.querySelector(selectors)，其中selectors就是你要传入的CSS选择器。比如，若想获取页面中第一个类名为example的元素，只需使用document.querySelector('.example')。如果没有找到匹配的元素，该方法会返回null。这在实际开发中非常有用，例如当你想快速定位某个特定样式的元素并对其进行操作时，querySelector就能派上用场。假设页面有一个唯一的导航栏，其类名为nav-bar，你可以用const nav = document.querySelector('.nav-bar');获取它，之后就可以为它添加点击事件、修改样式等操作。

而querySelectorAll方法则返回文档中所有匹配指定CSS选择器的元素列表（一个类似数组的对象）。语法同样为document.querySelectorAll(selectors)。例如，页面中有多个类名为product-item的商品元素，要获取所有这些元素，可以使用const productItems = document.querySelectorAll('.product-item');。通过这个返回的列表，你可以遍历所有匹配的元素，进行批量操作。比如为所有商品元素添加相同的点击事件监听器，实现点击每个商品弹出详情信息的功能：

const productItems = document.querySelectorAll('.product-item');
productItems.forEach((item) => {
    item.addEventListener('click', () => {
        console.log('商品详情');
    });
});

需要注意的是，querySelectorAll返回的不是真正的数组，而是一个NodeList对象。虽然它类似数组，有length属性，也能通过索引访问元素，但没有数组的一些方法，如map、filter等。不过可以使用Array.from()方法将其转换为真正的数组，从而方便地使用数组的各种方法。

querySelector和querySelectorAll为JavaScript开发者提供了便捷、高效的DOM元素获取方式，熟练掌握它们能显著提升开发效率，优化页面交互体验。