mozilla
您的搜索结果

    document.querySelector()

    概述

    返回当前文档中第一个匹配特定选择器的元素(使用深度优先,前序遍历规则遍历所有文档节点)。

    语法

    element = document.querySelector(selectors);
    

    其中

    • element 是一个 element 对象(DOM 元素)。
    • selectors 是一个字符串,包含一个或是多个 CSS 选择器 ,多个则以逗号分隔。

    例子

    这个例子中,会返回当前文档中第一个类名为 "myclass" 的元素:

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

    注意

    如果没有找到匹配元素,则返回 null,否则找到多个匹配元素,则返回第一个匹配到的元素。

    如果选择器是一个 ID,并且这个 ID 在文档中错误地使用了多次,那么返回第一个匹配该 ID 的元素。

    如果指定的选择器不合法,则抛出 SYNTAX_ERR 异常。

    querySelector()在 Selectors API 中引入。

    传递给 querySelector 的字符串参数必须符合 CSS 语法。

    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>
    

    浏览器兼容性

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 1 3.5 (1.9.1)
    bug 416317
    8 10 3.2 (525.3)
    WebKit bug 16587
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 2.1 yes 9 10.0 3.2

    规范

    相关链接

    文档标签和贡献者

    标签: 
    此页面的贡献者有: ziyunfei, rolinli, teoli, AshfaqHossain, rebaomi
    最后编辑者: AshfaqHossain,
    隐藏侧边栏