javascript 高级选择器：querySelector 和 querySelectorAll

最新推荐文章于 2025-02-24 23:24:00 发布

转载最新推荐文章于 2025-02-24 23:24:00 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wuheng1991/p/5160185.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍了W3CSelectorsAPI规范中的querySelector和querySelectorAll方法，这两种方法可根据CSS选择器规范快速定位文档中的特定元素。文章提供了使用示例，并展示了如何在HTML文档中通过ID和类名选取元素。

querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。

目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。
W3C Selectors API

querySelector 和 querySelectorAll 在规范中定义了如下接口：

    module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); 
NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector;
 Element implements NodeSelector; };

     

从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。
querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。

获取页面I属性D为test的元素：

    document.getElementById("test");
    //or
    document.querySelector("#test");
    document.querySelectorAll("#test")[0];

获取页面class属性为”red”的元素:

    document.getElementsByClassName('red')
    //or
    document.querySelector('.red')
    //or
    document.querySelectorAll('.red')

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

    <div class="con">
           <div id="han">
                12345678
           </div>
    </div>

    <div class="cont">
          
                12345678999999
            
    </div>

    <p class="yi">1111111111111
    </p>
     
</body>
<script>
    // var dataspan = new Date()*1;
    // alert(dataspan);

    // ha = document.getElementById("han");
    // alert(ha);
    // // w = ha.innerHTML;
    // // alert(w);

    // ha1 = document.getElementsByClassName('cont');
    // alert(ha1);
    // // g = ha.text;
    // // alert(g);
    // ha2 = document.querySelector(".cont");
    // // hh = ha2.innerHTML;

    // alert(ha2);

    ha3 = document.querySelector(".yi");
    alert(ha3);
    // gg = ha3.innerHTML;
    ha3.style.background="#f00";
    ha3.style.color="#abcdef";
    ha3.style.textAlign="center";

    // alert(gg);
</script>
</html>