选择符API

Posted 2020-11-20 紅葉

querySelector()

 querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。

//获得body元素
 var body = document.querySelector("body");
//获得ID为"myDiv"的元素
var myDiv = document.querySelector(‘#myDiv‘);
//获得类为"selected"的第一个元素
var selected = document.querySelector(‘.selected‘);
//获得类为"button"的第一个"img"元素
var img = document.body.querySelector(‘img.button‘);

通过Document类型调用querySelector()方法时，会在文档元素的范围内查找匹配的元素，而通过Element类型调用querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。接收的CSS选择符可以简单也可以复杂，视情况而定，如果传入不被支持的选择符，querySelector()会抛出错误。

querySelectorAll()

querySelectorAll()方法时接收的参数与querySelector()方法一样，都是一个CSS选择符，但是返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。具体来说，返回的值实际上是带有所有属性和方法的NodeList，而其底层实现则类似于一组元素的快照，而非不断对文档进行搜索的动态查询，这样实现可以避免使用NodeList对象通常会引起的大多数性能问题。

只要传给querySelectorAll()方法的CSS选择符有效，该方法都会返回一个NodeList对象，而不管找到多少匹配的元素，如果没有找到匹配的元素，NodeList就是空的。

和querySelector()类似，能够调用querySelectorAll()方法的类型包括Document，DocumentFragment和Element。

//获得ID为"myDiv"的元素中的所有的<em>元素。
var ems = document.getElementById("myDiv").querySelectorAll("em");
//获得类为"selected"的所有元素
var selecteds = document.querySelectorAll(‘.selected‘);
//获得类为"button"的第一个"img"元素
var strongs = document.body.querySelector(‘p strong‘);

要取得返回的NodeList中的每一个元素，可以使用item()方法，也可以使用方括号语法：

var i,len,strong;
for(i=0,len=strongs.length;i<len;i++){
    strong = strong[i];
    strong.clssName = "important";
}

同样与querySelector()类似，如果传入了浏览器不支持的选择符中有语法错误，querySelectorAll()会抛出错误。

matchesSelector()

matchesSelector()方法,方法接收一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则，返回false，看例子。

if(document.body.matchesSelector("body.papel")){
        //true
    }

在取得某个元素引用的情况下，使用这个方法能够方便地检测它是否会querySelector()或querySelectorAll()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。

截止2011年年中，还没有浏览器支持matchesSelector()方法；不过，也有一些实验性的实现。IE9+通过msMatchesSelector()支持该方法，Firefox3.6+通过mozMatchesSelector()支持该方法，Safari5+和Chrome通过webkitMatchesSelector()支持该方法。因此，如果你想使用这个方法，最好是编写一个包装函数。

function matchesSelector(element,selector){
    if(element.matchesSelector){
        return element.matchesSelector(selector);
    }else if(element.msMatchesSelector){
        return element.msMatchesSelector(selector);
    }else if(element.mozMatchesSelector){
        return element.mozMatchesSelector(selector);
    }else if(element.webkitMatchesSelector){
        return element.webkitMatchesSelector(selector);
    }else{
        throw new Error("Not supported");
    }
}
if(matchesSelector(document.body,"body.page1")){
    //要执行的操作
}