JavaScript中选择器函数querySelector和querySelectorAll
最新回答
我狠丑可是我也不温柔
2024-01-28 15:59:59
querySelector用于查找匹配的第一个元素，可应用于Document和Element实例，接收CSS选择器字符串，返回匹配的HTML元素或null。语法如下：
Document实例调用用于获取整个页面的匹配元素，示例如下：
Element实例调用则针对该元素子树内匹配的元素，例如：
Element实例调用等效于Document实例调用，仅需修改选择器字符串参数，使得代码更加简洁。在确定元素业务场景下，Element实例调用更加便捷。
querySelectorAll方法类似于querySelector，但返回所有匹配的元素，类型为NodeList。示例如下：
遍历NodeList常用for、for of、forEach等方法。使用for in时会遍历原型链上的方法，如entries、forEach等。NodeList为快照而非实时数据，若在页面添加新元素，NodeList长度不变。对比getElementsByClassName，获取的对象为HTMLCollection类型，随文档流变化而变化。
总结，querySelector和querySelectorAll提供了通过CSS选择器获取页面元素的功能，前者返回匹配的第一个元素，后者返回所有匹配元素，NodeList类型。在实际应用中需注意遍历方式和实时数据处理。
热门标签
