DOM扩展-Selectors API(选择符 API)

Posted 2020-08-07 老板丶鱼丸粗面

DOM扩展

 对DOM的两个主要扩展是SelectorsAPI(选择符API)和html5

SelectorsAPI(选择符API)是由W3C发起制定的一个标准，致力于浏览器原生支持CSS查询，SelectorsAPILevel 1的核心是两个方法：querySelector()和querySelectorAll(),可以通过Document及Element类型的实例调用他们。

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

1     //取得body元素
2     var body = document.querySelector(‘body‘);
3     //取得ID为"myDiv"的元素
4     var myDiv = document.querySelector(‘#myDiv‘);
5     //取得类为"selected"的第一个元素
6     var selected = document.querySelector(‘.selected‘);
7     //取得类为"button"的第一个图像元素
8     var img = document.body.querySelector(‘img.button‘);

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

querySelectorAll()，接受的参数是一个CSS选择符，返回的是所有匹配元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。

1     //取得某<div>中的所有<em>元素
2     var em = document.getElementById(‘myDiv‘).querySelectorAll(‘em‘);
3     //取得类为"selected"的所有元素
4     var selected = document.querySelectorAll(‘.selected‘);
5     //取得所有<p>元素中的所有<strong>元素
6     var strongs = document.querySelectorAll(‘p strong‘);

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

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

matchesSelector()，接受一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。这是Selectors API Level 2 规范为Element类型新增的一个方法。

但是现在这个方法还没有得到所有浏览器的支持，所以要想使用这个方法，最好是编写一个包装函数。

 1     function matchesSelector(element,selector){
 2         if(element.matchesSelector){
 3             return element.matchesSelector(selector);
 4         }else if(element.msMatchesSelector){    //IE 9+
 5             return element.msMatchesSelector(selector);
 6         }else if(element.mozMatchesSelector){    //Firefox 3.6+
 7             return element.mozMatchesSelector(selector);
 8         }else if(element.webKitMatchesSelector){    //Safari 5+和Chrome
 9             return element.webKitMatchesSelector(selector);
10         }else {
11             throw new Error("Not supported.");
12         }
13     }
14 
15     if(matchesSelector(document.body,"body.page1")){
16         //执行操作
17     }

对于元素间的空格，IE9及之间版本不会返回文本节点，而其他浏览器都会返回文本节点。这样就导致了在使用childNodes和firstChild等属性时的行为不一致。为了弥补这一差异，而同时又保持DOM规范不变，Element Traversal规范新定义了一组属性。

childElementCount:返回子元素的个数
firstElementChild:指向第一个子元素；firstChild的元素版
lastElementChild：指向最后一个子元素；lastChild的元素版
previorsElementSibling：指向前一个同辈元素；previousSibling的元素版
nextElementSibling：指向后一个同辈元素；nextSibling的元素版

利用这些元素不必担心空白文本节点，从而可以更方便的查找DOM元素了。

过去，要跨浏览器遍历某个元素的所有子元素，需要下面这样写代码

1     var i,
2         len,
3         child = element.firstChild;
4     while(child != element.lastChild){
5         if(child.nodeType == 1){
6             processChlid(child);
7         }
8         child = child.nextSibling;
9     }

而使用Element Traversal新增的元素，代码会更简洁。

1     var i,
2         len,
3         child = element,firstElementChild;
4     while(child != element.lastElementChild){
5         processChild(child);
6         child = child.nextElementSibling;
7     }