HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。
注意： querySelector() 方法【仅仅返回】匹配指定选择器的【第一个元素】。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
querySelector()参数类型可以为如下：
指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
对于【多个选择器，使用逗号隔开】，返回一个匹配的元素。
获取文档中id=”container”的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="contatiner">huang</div>
<p class="lover">XXX</p>
<a href="https://www.taobao.com" target="_blank">淘宝一下</a>
<h2>二级标题</h2>
<h3>三级标题</h3>
<script type="text/javascript">
var destination = document.querySelector("#contatiner");
var node = document.querySelector("p.lover");
var node2 = document.querySelector("a[target]");
console.log(destination);
console.log(node);
console.log(node2);
document.querySelector("h2,h3").style.backgroundColor = "blue";
</script>
</body>
</html>
结果：
<div id="contatiner">huang</div>
<p class="lover">XXX</p>
<a href="https://www.taobao.com" target="_blank">淘宝一下</a>
querySelectorAll与querySelector的区别:
querySelectorAll : 找出所有匹配的节点并返回数组.
querySelector : 找到一个后就返回节点对象。
1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。
2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。
3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果
找出body标签下的第一个div
document.body.querySelectorAll("div")[0]
找出所有标签
document.querySelectorAll("*")
找出head下所有的标签
document.head.querySelectorAll("*")
找出所有class=box的标签
document.querySelectorAll(".box")
找出所有class=box的div标签
document.querySelectorAll("div.box")
找出所有id=lost的标签
document.querySelectorAll("#lost")
找出所有p标签并且id=lost的标签
document.querySelectorAll("p#lost")
找出所有name=qttc的标签
document.querySelectorAll("*[name=qttc]")
找出所有存在name属性的标签
document.querySelectorAll("*[name]")
找出所有class=hot并且存在name属性的p标签
document.querySelectorAll("p.hot[name]")
document.querySelectorAll("p[class=hot][name]")
相关推荐
先按W3C的规范来说这两个方法应该返回的内容吧： querySelector： return the first matching Element node within the node’s subtrees. If there is no such node, the method must return null.（返回指定元素...
querySelectorAll方法与querySelector类似，但它返回的是一个NodeList，包含了所有匹配选择器的元素，即使没有匹配的元素，也会返回一个空的NodeList。因此，querySelectorAll通常用于获取一组元素，而querySelector...
由于querySelector和querySelectorAll方法与jQuery选择器在语义上有相似之处，一些开发者可能会对这两个原生JavaScript方法的浏览器实现产生误解。例如，有些开发者可能会期待使用querySelectorAll返回的结果是可以...
这与querySelector的区别在于，querySelectorAll总是返回一个列表，即使没有匹配的元素，列表也将是空的。例如，如果你希望选取所有class为"emphasis"的文本并将其加粗，可以这样做： ```javascript var ...
与 `querySelector` 不同，`querySelectorAll` 的结果是静态的，这意味着当你在获取结果后修改DOM，原有的列表不会更新以反映这些变化。 在提供的示例代码中，`$('inner').querySelectorAll('#main h4.inside')` 这...
querySelectorAll 方法与 querySelector 类似，但它可以返回多个元素，返回一个包含匹配到的元素的数组。例如，查找全部 class 为 emphasis 的元素，可以使用 `document.querySelectorAll(".emphasis");`。 使用 ...
- 返回值：与 `querySelector` 不同，`querySelectorAll` 返回一个 `NodeList` 集合，包含所有匹配选择器的元素。即使没有元素匹配，也会返回一个空的 `NodeList`。 - 使用场景：当需要找到所有符合特定条件的元素...
与 `querySelector` 不同的是，`querySelectorAll` 返回的是一个 `NodeList` 对象，这是一个包含所有匹配指定CSS选择器的元素的集合。即便文档中只有一个元素匹配了选择器，返回的 `NodeList` 也将包含这个元素。...
在IE8中，querySelectorAll()方法的使用可能会遇到一些与其它浏览器不同的问题，尤其是在处理某些特定选择器时。querySelectorAll()方法是W3C标准的一部分，用于返回文档中匹配指定CSS选择器的所有元素。在IE8中，这...
总的来说，`document.querySelector`和`document.querySelectorAll`为JavaScript提供了与jQuery类似的强大功能，让原生JavaScript代码更加简洁和高效。这两个方法不仅减少了对jQuery库的依赖，而且在某些情况下，...
`querySelector` 和 `querySelectorAll` 是JavaScript中用于DOM操作的两个强大方法，它们允许开发者使用CSS选择器的方式来选取DOM元素，极大地提高了代码的可读性和效率。这两个方法在现代浏览器中得到了广泛支持，...
通过利用TypeScript 4.1模板文字类型， querySelector和querySelectorAll函数具有更好的键入功能。 :optical_disk: 安装 npm i -D typed-query-selector :watermelon: 用法 自动补片 您需要做的就是导入此模块，...
这个方法在处理单个元素时非常有用，因为`querySelector()`只会返回匹配选择器的第一个元素，而不是像`querySelectorAll()`那样返回一个包含所有匹配元素的NodeList。 **基本语法**： ```javascript document....
实用程序与当量querySelector ， querySelectorAll ，和matches 。 DOM和hast之间的显着区别是DOM节点引用了其父节点，这意味着可以对document.body.matches(':last-child')进行评估。 此信息不会存储在hast中，...