简介

HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。

用法

两个方法,其中,querySelector返回满足条件的单个DOM元素,按照深度院线和先序遍历的原则使用参数提供的css选择器在DOM中查找。

//返回class为list下,子元素里class为item的首个DOM元素。
element = document.querySelector('.list .item');
//注意参数必须严格符合css选择符规范,比如说元素名、类名和id均不能以数字开头,以下代码出错
document.querySelector('11abc');
//如果类名中有冒号等字符需要经过转义
document.querySelector('test\\:abc')

而querySelectorAll,则是返回满足所有条件的元素,结果是个nodeList集合,查找规则与上面相同。

elements = document.querySelectorAll('.list .item'); //结果是是一个nodeList集合

这里返回的nodeList集合中的元素是非实时的static node list,而getElementsBy系列的返回的是一个live node list。看下面的例子

// for循环 [lis.length] 次,lis.length定下不会再被更新。
var ul = document.querySelectorAll('ul')[0],
lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
} // append操作将无限循环,每append一次,lis都会随之更新,lis.length+1,达不到循环条件结束。
var ul = document.getElementsByTagName('ul')[0],
lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
}

兼容性

querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 良好支持 。

html5 中高级选择器 querySelector的更多相关文章

  1. html5 新选择器 querySelector querySelectorAll

    querySelector 返回满足条件的单个元素 使用实例 HTML <div id="main">主体布局</div> JS var main =doc ...

  2. 第87天:HTML5中新选择器querySelector的使用

    一.HTML5新选择器 1.document.querySelector("selector");selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回n ...

  3. HTML5中类jQuery选择器querySelector的使用

    简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素,功能类似于jQuery的 ...

  4. HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document);

    基本用法 querySelector 该方法返回满足条件的单个元素.按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找,返回第一个满足条件的元素. ----> querySe ...

  5. HTML5中类jQuery选择器querySelector和querySelectorAll的使用

    支持的浏览IE8+,Firefox3.5+,Safari3.1+ Chrome和Opera 10+ 1.querySelector()方法接收一个选择符,返回第一个匹配的第一个元素,如果没有返回nul ...

  6. html5新增选择器

    分享点html5的学习笔记,比较基础,突然发现通过写博客来记笔记有很多优点呢,平常记得笔记比较简单,复习起来比较吃力,看自己的博客理解起来还比较轻松,而且只有真正理解了才能表达清楚让别人看懂,还锻炼语 ...

  7. javascript选择器querySelector和querySelectorAll的使用和区别

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  8. js高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  9. 原生的强大DOM选择器querySelector

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

随机推荐

  1. es 查询分词字段为空的数据

    { "query": { "bool" : { "filter" : { "script" : { "scri ...

  2. Logarithmic transformation|Data transfer|MASS|Box-Cox

    数据转换(Data transfer) 方差分析的前提是方差齐性,可以使用transfer改变方差使得方差变齐.不正态和outlier. Logarithmic transformation使方差聚合 ...

  3. bug宝典linux篇 LC_CTYPE: cannot change locale (en_US.UTF-8): No such file or directory(转)

    升级glibc库后,使用xShell登录linux,提示: Connecting to ... Connection established. To escape to local shell, pr ...

  4. JS去重函数的扩展应用

    数据: 账单id[1,1,1,1,2,2,2,3,3,3,3,3,3,3], 相对于账单id的金额[100,120,110,150,200,180,220,115,150,120,180,220,14 ...

  5. Luogu_1280_尼克的任务

    题目描述 尼克每天上班之前都连接上英特网,接收他的上司发来的邮件,这些邮件包含了尼克主管的部门当天要完成的全部任务,每个任务由一个开始时刻与一个持续时间构成. 尼克的一个工作日为N分钟,从第一分钟开始 ...

  6. Python---9高级特性

    一.切片 取一个list或tuple的部分元素是非常常见的操作.比如,一个list如下: >>> L = ['Michael', 'Sarah', 'Tracy', 'Bob', ' ...

  7. Python如何让字典保持有序

    问题: Python如何让字典保持有序 ? 解决方案: 使用collections.OrderedDict代替Dict. 验证程序: from collections import OrderedDi ...

  8. Android studio常用快捷键与设置

    1.格式化代码: 命令 快捷键 将代码合并成一行 Ctrl + Shift + J 格式化 Ctrl+Alt+L 2.API函数参数提示:双击选中所要提示的函数,再按F2即可显示函数的使用方法. 3. ...

  9. 4K手机能拯救索尼手机吗?

    智能手机屏幕分辨率究竟达到多少才是极限,一直是业内争论不休的问题.从低分辨率一路走来,直到iPhone 4搭载视网膜屏,业内才有了一个较为统一的认知:屏幕起码要在合适距离下看不到文字.图像虚影,才称得 ...

  10. SQL语法练习(一)

    查询学习课程"python"比课程 "java" 成绩高的学生的学号;– 思路:– 获取所有有python课程的人(学号,成绩) - 临时表– 获取所有有jav ...