queryselectorall方法返回静态nodelist集合，支持复杂css选择器，不会随dom变化更新。1. 它接受css选择器作为参数，能精准定位元素；2. 返回的nodelist是静态的，文档结构变化不影响其内容；3. 相比getelementsbyclassname/tagname，功能更强大但返回的是非动态集合；4. 可通过array.from或扩展运算符转换为数组以便使用数组方法；5. 适用于需稳定集合或复杂选择逻辑的场景。
JavaScript的querySelectorAll方法允许你通过CSS选择器从文档中选取所有匹配的元素，返回一个NodeList集合。它就像一个超级强大的搜索工具，让你能精准地定位到页面上的特定元素，并进行操作。
querySelectorAll方法
querySelectorAll方法是document对象的一个方法，它接受一个CSS选择器字符串作为参数，并返回一个包含所有匹配元素的静态NodeList。这意味着即使文档结构发生变化，NodeList的内容也不会动态更新。
立即学习“Java免费学习笔记（深入）”；
基本语法：
document.querySelectorAll(selectors)
selectors：一个包含一个或多个CSS选择器的字符串。多个选择器可以使用逗号分隔。
使用示例：
<!DOCTYPE html>
<html>
<head>
<title>querySelectorAll Example</title>
</head>
<body>
<ul id="myList">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li>Item 3</li>
</ul>
<button onclick="findItems()">Find Items</button>
<script>
function findItems() {
// 查找所有class为"item"的li元素
const items = document.querySelectorAll("#myList li.item");
// 遍历NodeList并修改文本内容
items.forEach(item => {
item.textContent = "Found!";
});
}
</script>
</body>
</html>在这个例子中，点击按钮后，findItems函数会使用querySelectorAll找到所有class为"item"的li元素，然后将它们的文本内容修改为"Found!"。注意，选择器"#myList li.item"首先通过ID选择器#myList定位到ul元素，然后在该元素内部查找class为"item"的li元素。
querySelectorAll和getElementsByClassName/TagName的区别？
querySelectorAll和getElementsByClassName、getElementsByTagName都用于选取DOM元素，但它们之间存在一些关键区别：
-
选择器类型：
querySelectorAll接受CSS选择器字符串，功能更强大，可以选取各种复杂的元素组合。而getElementsByClassName和getElementsByTagName只能分别通过类名和标签名进行选择，功能相对简单。 -
返回值类型：
querySelectorAll返回一个静态的NodeList，而getElementsByClassName和getElementsByTagName返回一个动态的HTMLCollection。这意味着，如果文档结构发生变化，HTMLCollection的内容会动态更新，而NodeList不会。 -
性能： 在某些情况下，
getElementsByClassName和getElementsByTagName可能比querySelectorAll更快，尤其是在只需要通过类名或标签名进行选择时。但现代浏览器对querySelectorAll的性能进行了优化，因此在大多数情况下，性能差异可以忽略不计。 -
兼容性：
querySelectorAll在较老的浏览器中可能存在兼容性问题，但现在几乎所有主流浏览器都支持它。
什么时候应该使用querySelectorAll？
querySelectorAll是一个非常灵活和强大的方法，适用于以下场景：
- 需要使用复杂的CSS选择器来选取元素时。 例如，选取特定父元素下的特定类型的子元素，或者选取具有特定属性的元素。
- 需要获取一个静态的元素集合，不希望集合的内容随着文档结构的变化而改变时。
-
代码可读性和可维护性更重要时。 相比于使用多个
getElementsByClassName和getElementsByTagName组合来实现复杂的选择逻辑，使用querySelectorAll可以使代码更简洁易懂。
例如，假设你需要选取所有class为"highlight"的div元素，并且这些div元素必须是ID为"content"的元素的子元素。使用querySelectorAll可以轻松实现：
const highlightedDivs = document.querySelectorAll("#content > div.highlight");如果使用getElementsByClassName和getElementsByTagName，则需要先获取ID为"content"的元素，然后获取该元素下的所有div元素，最后遍历这些div元素，筛选出class为"highlight"的元素，代码会更复杂。
如何处理querySelectorAll返回的NodeList？
querySelectorAll返回的是一个NodeList，它不是一个真正的数组，但它具有类似数组的结构，可以使用索引访问其中的元素，也可以使用length属性获取元素的数量。
NodeList可以使用forEach方法进行遍历：
const items = document.querySelectorAll(".item");
items.forEach(item => {
console.log(item.textContent);
});如果你需要使用数组的其他方法，例如map、filter、reduce等，可以将NodeList转换为数组：
const items = document.querySelectorAll(".item");
// 使用Array.from()方法将NodeList转换为数组
const itemsArray = Array.from(items);
// 使用扩展运算符将NodeList转换为数组
const itemsArray2 = [...items];
const modifiedItems = itemsArray.map(item => item.textContent.toUpperCase());
console.log(modifiedItems);NodeList 是“活的”吗？
这是一个常见的误解。querySelectorAll 返回的 NodeList 是静态的，这意味着它不会随着文档 DOM 的更改而自动更新。这与 getElementsByClassName 或 getElementsByTagName 返回的 HTMLCollection 不同，后者是“活的”，会动态反映 DOM 的变化。
例如：
<div id="container">
<p class="dynamic">Paragraph 1</p>
</div>
<script>
const paragraphs = document.querySelectorAll('.dynamic');
console.log(paragraphs.length); // 输出 1
const container = document.getElementById('container');
const newParagraph = document.createElement('p');
newParagraph.className = 'dynamic';
newParagraph.textContent = 'Paragraph 2';
container.appendChild(newParagraph);
console.log(paragraphs.length); // 仍然输出 1，因为 NodeList 是静态的
</script>在这个例子中，即使我们在之后添加了一个新的带有 dynamic 类的段落，querySelectorAll 返回的 paragraphs NodeList 的长度仍然是 1。这是因为 NodeList 在调用 querySelectorAll 时就已经确定了，之后 DOM 的变化不会影响它。
如果需要动态更新的集合，应该使用 getElementsByClassName 或 getElementsByTagName。 但请记住，在循环遍历动态集合时，需要特别小心，因为 DOM 的更改可能会导致无限循环或其他意外行为。
