面前的讲话

  尽管DOM作为API已经挺全面了,但是以落实再多之功效,DOM仍然进行了扩大,其中一个首要的扩充就是指向选择器API的扩展。人们对jQuery的称,很多凡由jQuery方便之要素选择器。除了前方都介绍过的getElementsByClassName()方法外,DOM拓展了querySelectorAll()、querySelector()和matchesSelector()这3种方式,通过CSS选择符查询DOM文档取得元素的援的功用化了原生的API,解析及培养查询操作以浏览器中通过编译后底代码来好,极大地改进了性能。本文将详细介绍html5初长的3栽selector方法

 

方法

querySelector()

  querySelector()方法接收一个CSS选择切合,返回跟拖欠模式匹配的首先独因素,如果没找到匹配的素,返回null。该办法既而用以文档document类型,也只是用以元素element类型。关于CSS选择器的详尽内容挪至此

  [注意]IE7-浏览器不支持

<body style="height: 100%;">
<div class="box" id="box" style="height: 200px;">
<ul class="list" style="height:100px">
        <li class="in" style="height: 30px;">1</li>
        <li class="in" style="height: 30px;" title="test">2</li>
        <li class="in" style="height: 30px;">3</li>
    </ul>    
</div>
<script>
//因为没有.null类名,所以返回null
var oNull = document.querySelector('.null');
console.log(oNull);//null
//通过<body>标签取得元素
var body = document.querySelector("body");
console.log(body.style.height);//100%
//通过id属性取得元素
var oBox = document.querySelector('#box');
console.log(oBox.style.height);//200px
//通过结合元素的类选择器取得元素
var oList = document.querySelector('ul.list');
console.log(oList.style.height);//100px
//通过类名取得元素
var oIn = document.querySelector('.in');
console.log(oIn.innerHTML);//1
//通过属性选择器取得元素
var oTest = body.querySelector('[title="test"]');
console.log(oTest.innerHTML);//2
</script>
</body> 

querySelectorAll()

  querySelectorAll()接收一个CSS选择符合,返回一个类数组对象NodeList的实例。具体来说,返回的值实际上是含所有属性和方的NodeList,而该底层实现则类似于同组元素的快照,而休不停对文档进行搜索的动态查询。这样实现好避以NodeList对象通常会惹的大多数属性问题。只要传被querySelectorAll()方法的CSS选择适合有效,该方式都见面返回一个NodeList对象,而不论找到小匹配的素

  没有匹配元素时,返回空的类数组对象,而未是null

  [注意]IE7-浏览器不支持

<body style="height: 100%;">
<div class="box" id="box" style="height: 200px;">
<ul class="list" style="height:100px">
        <li class="in" style="height: 30px;">1</li>
        <li class="in" style="height: 30px;" title="test">2</li>
        <li class="in" style="height: 30px;">3</li>
    </ul>    
</div>
<script>
//返回[]
var oNull = document.querySelectorAll('.null');
console.log(oNull);
//取得body元素
var body = document.querySelectorAll("body")[0];
console.log(body.style.height);//100%
//取得所有class为"in"的元素
var oIn = document.querySelectorAll('.in');
for(var i = 0 ; i < oIn.length; i++){
    console.log(oIn[i].innerHTML);//1,2,3    
}
//取得title属性为test的元素
var oTest = body.querySelectorAll('[title="test"]');
console.log(oTest);//[li.in]
</script>
</body>

matchesSelector()

  matchesSelector()方法接收一个CSS选择切合参数,如果调用元素和拖欠选择符相匹配,返回true;否则回false

<body id="test">
<script>
    //Uncaught TypeError: document.body.matchesSelector is not a function
    console.log(document.body.matchesSelector('#test'));
</script>
</body>

  由于兼容性问题,现在相继浏览器都不过支持加以前缀的办法。IE9+浏览器支持msMatchesSelector()方法,firefox支持mozMatchesSelector()方法,safari和chrome支持webkitMatchesSelector()方法。所以兼容写法为:

function matchesSelector(element,selector){
    if(element.matchesSelector){
        return element.matchesSelector(selector);
    }
    if(element.msMatchesSelector){
        return element.msMatchesSelector(selector);
    }
    if(element.mozMatchesSelector){
        return element.mozMatchesSelector(selector);
    }
    if(element.webkitMatchesSelector){
        return element.webkitMatchesSelector(selector);
    }            
}

<body id="test">
<script>
console.log(matchesSelector(document.body,'#test'));//true
</script>
</body>

 

非实时

  与getElementById()和getElementsByTagName()方法不同,querySelector()和querySelectorAll()方法取得的类数组对象是勿动态实时的

<div id="container">
    <div>1</div>
    <div>2</div>
</div>
<script>
var container = document.getElementById('container');
var divOne = container.querySelector('div:last-child');
var divAll = container.querySelectorAll('div');
console.log(container.children.length);//2
console.log(divOne.innerHTML);//2
console.log(divAll.length);//2

var newDiv = document.createElement('div');
newDiv.innerHTML = 3;
container.appendChild(newDiv);

console.log(container.children.length);//3
//由于querySelector不是实时的,所以其保存的仍然是原来第二个div的值
console.log(divOne.innerHTML);//2
//由于querySelectorAll不是实时的,所以仍然只保存了两个div元素
console.log(divAll.length);//2

console.log(container.querySelector('div:last-child').innerHTML);//3
console.log(container.querySelectorAll('div').length);//3
</script>

 

缺陷

  selector类方法以要素上调用时,指定的选择器仍然当一切文档中开展匹配,然后过滤出结果集,以便其只包含指定元素的后人元素。这看起是违反常规的,因为她象征选择器字符串能包含元素的祖宗而不只是所匹配的素 

<div id="container">
    <div>1</div>
    <div>2</div>
</div>
<script>
var container = document.getElementById('container');
console.log(container.querySelectorAll('div div'));//[div div]
</script>

  按照正常理解,控制台应该返回空的类数组对象,因为id为container的div元素的子元素中,不存div元素嵌套的场面

  但是,该方式其实返回[div
div]。这是为参数jQuery中的选择器包含了元素的先世

  所以,如果出现后选择器,为了防拖欠问题,可以于参数中显式地增长当前因素的选择器

<div id="container">
    <div>1</div>
    <div>2</div>
</div>
<script>
var container = document.getElementById('container');
console.log(container.querySelectorAll('#container div div'));//[]
console.log(container.querySelectorAll('#container div'));//[div div]
console.log(container.querySelectorAll('div'));//[div div]
</script>

 

最后

  虽然在正在非实时跟参数缺陷的题目,但是缺点不掩瑜,selector类方法的面世大地简化了追寻元素的麻烦操作。而且,它们支持IE8浏览器

  javascript选择器API系列写了了,欢迎交流

相关文章

网站地图xml地图