《JS高程（3）》DOM扩展-API选择符-第11章笔记(18)

142 阅读 0 评论 94 点赞

我是靠谱客的博主留胡子巨人，这篇文章主要介绍《JS高程（3）》DOM扩展-API选择符-第11章笔记(18)，现在分享给大家，希望可以做个参考。

（最近有些私人的事，忍不住想念叨两句。今天雪格外的大，因为一些拖了很久的事，说不上来的抑郁，很多事到最后往往都是事与愿违。还是太软弱，一刀斩断就不会像现在这样割一次腐肉催眠自己一次了。要让自己强大起来，称为自己的依靠才不会失望！）
新的一天又开始，奋斗吧少年~

浏览器中几乎所有的DOM扩展都是专有的，对DOM的两个主要的扩展是SelectorsAPI(选择符API)和HTML5。还有Element Traversal (元素遍历)规范，为DOM添加了一些属性。

选择符API

JavaScript库中最常用的一项功能，就是根据CSS选择符选择与某个模式匹配的DOM元素。
JQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用，从而抛开了getElementById()和getElementTagName().

Selectors API是由W3C发起定制的一个标准，致力于让浏览器原生支持CSS查询。所有实现这一功能的JavaScript库都会写一个基础的CSS解析器，然后再使用已有的DOM方法查询文档并找到匹配的节点。

Selectors API Level 1的核心是两个方法：

querySelector()方法
querySelectorAll()方法
通过Document和Element类型调用他们。

querySelector()方法

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
//取得body元素
var body = document.querySelector("body");

//取得ID为"myDiv"的元素
var selected = document.querySelector("#myDiv");

//取得类为"selected"的第一个元素
var selected = document.querySelector(".selected");

//取得类为"button"的第一个图像元素
var img = document.body.querySelector("img.buttom")

通过Document类型调用querySelector()方法时，会在文档元素的范围内查找匹配的元素。
通过Element类型调用querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。

querySelectorAll()方法

querySelectorAll()方法接受一个CSS选择符，返回与该模式匹配的所有元素，返回一个带有所有属性和方法的NodeList实例，而底层实现则类似于一组元素的快照，而并非不断对文档进行搜索的动态查询。

复制代码

1
2
3
4
5
6
7
8
//取得某<div>中的所有<em>元素（类似于getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em");

//取得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selected");

//取得所有<p>元素中分的所有<strong>元素
var strongs = document.querySelectorAll("p strong");

要取得返回的NodeList中的每一个元素，可以使用item()方法，或者[]：

复制代码

1
2
3
4
5
6
var i, len, strong;
for (i = 0, len = strongs.length; i < len; i++){
    //或者strong.item(i)
    strong = strong[i];
    strong.className = "important";
}

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

matchesSelector()方法

Selectors API Level 2规范为Element类型新增了一个方法matcherSelector()。
参数：一个css选择符；
返回值：调用元素与该选择符匹配，返回true,否则，返回false。

复制代码

1
2
3
if (document.body.matcherSelector("body.page1")){
    //true
}

在取得某个元素引用的情况下，使用这个方法能够方便的检测它是否能被querySelector()或querySelectorAll()方法返回。

包装函数：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function matchesSelector(element, selector){
    if(element.matcherSelector){
        return element.matchesSelector(selector);
    }else if(element.msMatcherSelector){
        return element.msMatchesSelector(selector);
    }else if(element.mozMatcherSelector){
        return element.mozMatchesSelector(selector);
    }else if(element.webMatcherSelector){
        return element.webMatchesSelector(selector);
    }else{
        throw new Error("Not supported.");
    }
}
if(matcherSelector(document.body, "body.page1")){
    //执行操作
}