关于 document.querySelector

2024年2月4日 248次阅读 来源: SunLn

作用

返回第一个婚配指定选择器的文档DOM节点，按深度优先前序分列。

声明

element = document.querySelector(selectors);

个中

element 是一个DOM对象.
selectors 是包括一个或许多个由逗号分开的CSS选择器。字符串。

示例

在下面这个示例中，文档中第一个具有 myclass 类的DOM元素将会被返回:

var el = document.querySelector(".myclass");

注重
倘使没有婚配到将返回 null 。不然返回第一个婚配到的元素。

倘使选择器是一个ID，但ID毛病的在文档中被使用了屡次，它将返回第一个婚配到的元素。

在指定的选择器参数是无效的时刻会抛出一个 SYNTAX_ERR 非常。

querySelector() 由 Selectors API 引入。

querySelector 的字符串参数必需相符CSS语法。

按 Selectors API 的指定， CSS伪类不会返回任何元素。

假如须要婚配没有按CSS声明的选择器，比方不适当的使用了冒号或许空格，你必需经由过程加斜杠转义这些字符。由于斜杠‘/’本身在JavaScript中是个转义字符，假如你想输入了一个字面的字符，你须要转义两次，一次由于 JavaScript 字符串，一次由于 querySelector。

<div id="foo\bar"></div>
<div id="foo:bar"></div>



<script>
  console.log('#foo\bar')               // "#fooar"
  document.querySelector('#foo\bar')    // Does not match anything

  console.log('#foo\\bar')              // "#foo\bar"
  console.log('#foo\\\\bar')            // "#foo\\bar"
  document.querySelector('#foo\\\\bar') // Match the first div

  document.querySelector('#foo:bar')    // Does not match anything
  document.querySelector('#foo\\:bar')  // Match the second div
</script>

浏览器兼容性

IE8+、其他高等浏览器

    原文作者：SunLn
    原文地址: https://segmentfault.com/a/1190000000678282
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞