首页 > Web开发 > 详细

html5 新选择器 querySelector querySelectorAll

时间:2015-08-11 11:45:49      阅读:515      评论:0      收藏:0      [点我收藏+]

 

 querySelector 返回满足条件的单个元素

使用实例

HTML

<div id="main">主体布局</div>

JS

var main =document.querySelector(‘#main‘);

console.log(main)

这时候结果返回的就是 整个元素 <div id="main">主体布局</div>

返回一个查询元素

测试谷歌 IE11 IE10 IE9  火狐  可以正常使用

PS: 如果接受多个查询参数 只返回第一个查询结果

上面的比如这样查询 document.querySelector(‘#main,.footer‘)

只返回<div id="main">主体布局</div>

截图

技术分享

querySelectorAll 返回满足条件的所有元素集合

HTML

<div class="footer">底部1</div>

<div class="footer">底部2</div>

JS

var footer = document.querySelectorAll(‘.footer‘);

console.log(footer);

技术分享

结果是一个数组 选择其中的一个就要用footer[0] footer[1]

结果

footer[0] 返回<div class="footer">底部1</div>
footer[1] 返回<div class="footer">底部2</div>

PS:可以接受多个参数 都返回到数组里

document.querySelectorAll(‘#main,.footer‘)

返回的是三个 

直接看截图

技术分享

html5 新选择器 querySelector querySelectorAll

原文:http://www.cnblogs.com/xxx91hx/p/4720227.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!