现在的出来的很多前端新手，一味的去钻研依赖框架的前端开发，而丢掉了很多基础知识，其实是不可取的，基础非常重要。今天我们来聊聊querySelector() 和 querySelectorAll() 方法，您是否还有印象吗？
语法
element = document.querySelector(selectors);
参数
返回值
表示文档中与指定的一组 CSS 选择器匹配的第一个元素，一个 Element对象。如果没有匹配到，则返回 Null。
如果你需要与指定选择器匹配的所有元素的列表，则应该使用querySelectorAll() 。
异常
SYNTAX_ERR指定
selectors的语法无效。
注意
如果选择器是一个 ID，并且这个 ID 在文档中错误地使用了多次，那么返回第一个匹配该 ID 的元素。
CSS 伪类不会返回任何元素，见 Selectors API 中的相关规定。
转义特殊字符
如果要匹配的 ID 或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。由于 JavaScript 中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为 Javascript 字符串转义，另一次是为 querySelector 转义）：
<div id="foo\bar"></div> <div id="foo:bar"></div> <script> console.log("#foo\bar"); // "#fooar" document.querySelector("#foo\bar"); // 不匹配任何元素 console.log("#foo\\bar"); // "#foo\bar" console.log("#foo\\\\bar"); // "#foo\\bar" document.querySelector("#foo\\\\bar"); // 匹配第一个 div document.querySelector("#foo:bar"); // 不匹配任何元素 document.querySelector("#foo\\:bar"); // 匹配第二个 div </script>
示例
查找第一个匹配 class 属性的 html 元素
这个例子中，会返回当前文档中第一个类名为 "myclass" 的元素：
var el = document.querySelector(".myclass");
一个更复杂的选择器
选择器也可以非常强大，如以下示例所示.
这里，一个 class 属性为"user-panel mAIn"的 div 元素<div>(<div class="user-panel main">) 内包含一个 name 属性为"login"的 input 元素<input> (<input name="login"/>) ，如何选择，如下所示：
var el = document.querySelector("div.user-panel.main input[name='login']");Document.querySelectorAll
概述
返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。
语法
querySelectorAll(selectors)
参数
返回值
异常
SyntaxError如果指定的
选择器不合法，会抛出错误。如$("##div")
示例
获取匹配列表
要获取文档中所有<p>元素的NodeList。
var matches = document.querySelectorAll("p");此示例返回文档中所有<div>元素的列表，其中 class 包含"note"或"alert"：
var matches = document.querySelectorAll("div.note, div.alert");在这里，我们得到一个<p>元素的列表，其直接父元素是一个 class 为"highlighted"的div，并且位于 ID 为"test"的容器内。
var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");此示例使用属性选择器返回文档中属性名为"data-src"的iframe元素列表：
var matches = document.querySelectorAll("iframe[data-src]");这里，属性选择器用于返回 ID 为"userlist"的列表中包含值为"1"的"data-active"属性的元素：
var container = document.querySelector("#userlist");
var matches = container.querySelectorAll("li[data-active='1']");访问匹配项
var highlightedItems = userList.querySelectorAll(".highlighted");
highlightedItems.forEach(function (userItem) {
deleteUser(userItem);
});用户备注
querySelectorAll() 的行为与大多数常见的 javaScript DOM 库不同，这可能会导致意外结果。
HTML
考虑这个 HTML 及其三个嵌套的<div>块
<div class="outer"> <div class="select"> <div class="inner"></div> </div> </div>
var select = document.querySelector(".select");
var inner = select.querySelectorAll(".outer .inner");
inner.length; // 1, not 0!在这个例子中，当在<div>上下文中选择带有"select"类的".outer .inner"时，仍然会找到类".inner"的元素，即使.outer不是基类的后代 执行搜索的元素（".select"）。默认情况下，querySelectorAll()仅验证选择器中的最后一个元素是否在搜索范围内。
:scope 伪类符合预期的行为，只匹配基本元素后代的选择器：
var select = document.querySelector(".select");
var inner = select.querySelectorAll(":scope .outer .inner");
inner.length; // 0
网友评论文明上网理性发言 已有1人参与
发表评论:
评论列表