简介

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. python语法基础-函数-迭代器和生成器-长期维护

    ###############    迭代器    ############## """ 迭代器 这是一个新的知识点 我们学习过的可以迭代的对象有哪些? list str ...

  2. Mate20 pro实现H265 (HEVC)实时硬件编码

    谁能告诉我手机上用H265实时编码有什么鸟用? 一.先看看手机支持哪些codec ALL_CODECS REGULAR_CODECS mine-type 选择mime-type为video/hevc, ...

  3. 安装oracle 11g 客户端,检查过程中报物理内存不足的解决

    今早接到同事电话,说安装oracle 11g客户端的时候,在检查先决条件的时候,报错,说内存不足,但是本机的内存是2G,肯定够用:如图: 找了一圈,原来Oracle执行先决条件检查是依赖c$共享,很多 ...

  4. SpringBoot之HandlerInterceptor拦截器的使用 ——(三)获取requestBody解决java.io.IOException: Stream closed

    原文地址:https://blog.csdn.net/zhibo_lv/article/details/81875705 感谢原作者

  5. linux上python3的安装

    我这里使用的时centos7-mini,centos系统本身默认安装有python2.x,版本x根据不同版本系统有所不同,可通过 python --V 或 python --version 查看系统自 ...

  6. hibernate lazy属性参数说明

    lazy,延迟加载 Lazy的有效期:只有在session打开的时候才有效:session关闭后lazy就没效了. lazy策略可以用在: * <class>标签上:可以取值true/fa ...

  7. win7/win8下vmware/VirtualBox虚拟网卡显示未识别网络的解决

    http://blog.csdn.net/zengxianying/article/details/44017227

  8. PyCharm 介绍、安装、入门使用

    一.Pycharm介绍 前面几年的时间,我一直用的eclipse,后面开始听同事说用IntelliJ IDEA了,而且说是目前业界最好用的java开发工具,IDE(集成开发环境),没有之一.PyCha ...

  9. ysoserial-调试分析总结篇(1)

    前言: ysoserial很强大,花时间好好研究研究其中的利用链对于了解java语言的一些特性很有帮助,也方便打好学习java安全的基础,刚学反序列化时就分析过commoncollections,但是 ...

  10. IdentityServer4迁移至3.x版本注意问题详解

    前言 之前有一位购买我课程的童鞋利用最新的IdentityServer4版本即对应.NET Core 3.x,发布到生产环境在学习,结果出了一些问题,此前我并未过多关注IdentityServer4升 ...