HTML5-新API选择器

Posted 2020-06-16

新的选择器
document.querySelector("selector");
selector:根据CSS选择器返回第一个匹配到的元素，如果没有匹配到，则返回null;
支持： Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+

document.querySelectorAll("selector");
selector:根据CSS选择器返回所有匹配到的元素数组，如果没有匹配到，则返回空数组;
支持： Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+

 

 

example:

 1         <div class="oo">HELLO WORD</div>
 2         <div class="oo">this is a test</div>

<script type="text/javascript">

var cc=/*document.querySelector("div")*/document.querySelector(".oo");//返回匹配到的第一个内容

console.log(cc.innerhtml);

var dd=document.querySelectorAll("div");//返回匹配到的所有内容

console.log(dd.length);

for(var i=0;i<dd.length;i++){
console.log(dd.item(i).innerHTML);
}

/*

输出
HELLO WORD
2
HELLO WORD
this is a test
*/
</script>