专栏首页Angular&服务关于HTML5的各种选择器

关于HTML5的各种选择器

简介


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

用法


两个方法使用差不多的语法,都是接收一个字符串参数,这个参数需要是合法的CSS选择语法。

element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');

其中参数selectors 可以包含多个CSS选择器,用逗号隔开。

element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');

使用这两个方法无法查找带伪类状态的元素,比如querySelector(':hover')不会得到预期结果。

querySelector

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

element = document.querySelector('div#container');//返回id为container的首个div
element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素
querySelectorAll

该方法返回所有满足条件的元素,结果是个nodeList集合。查找规则与前面所述一样。

elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div

但需要注意的是返回的nodeList集合中的元素是非实时(no-live)的,想要区别什么是实时非实时的返回结果,请看下例:

<div id="container">
    <div></div>
    <div></div>
</div>
//首先选取页面中id为container的元素
container=document.getElementById('#container');
console.log(container.childNodes.length)//结果为2


//然后通过代码为其添加一个子元素
container.appendChild(document.createElement('div'));


//这个元素不但添加到页面了,这里的变量container也自动更新了
console.log(container.childNodes.length)//结果为3

通过上面的例子就很好地理解了什么是会实时更新的元素。document.getElementById返回的便是实时结果,上面对其添加一个子元素后,再次获取所有子元素个数,已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点)。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • angular2关于内置通道的使用

    minIntegerDigits是要使用的最小数字的整数数字。 默认为1 minFractionDigits是分数后的最小位数。 默认为0 maxFra...

    用户1437675
  • angular打包报错内存溢出 nodejs 执行失败报错 “JavaScript heap out of memory” 的解决办法

    报错信息很直观地指出是内存溢出了。是什么导致了内存溢出呢?其根本原因在于 nodejs 默认限制了最大可使用的内存大小。

    用户1437675
  • docker常用命令

    更新 : @snakeliwei 的提醒, 现在的docker有了专门清理资源(container、image、网络)的命令。 docker 1.13 中增加了...

    用户1437675
  • JS对象和数组

    对象的属性既可以存放基本数据类型也可以存放其他对象的引用值或者函数的引用值,如果存储的是函数的的引用值则该属性称为方法

    用户3159471
  • 300张小抄表搞定机器学习知识点:学习根本停不下来!

    入坑数据科学和人工智能的同学都知道,机器学习是一个集合了计算机、统计学和数学知识的交叉领域,除了日常练习,也需要很多枯燥的记忆和理解。单纯读书不容易串联概念,又...

    小莹莹
  • 300张小抄表搞定机器学习知识点:学习根本停不下来!

    入坑数据科学和人工智能的同学都知道,机器学习是一个集合了计算机、统计学和数学知识的交叉领域,除了日常练习,也需要很多枯燥的记忆和理解。单纯读书不容易串联概念,又...

    华章科技
  • Python yield 使用浅析

    斐波那契(Fibonacci)數列是一个非常简单的递归数列,除第一个和第二个数外,任意一个数都可由前两个数相加得到。用计算机程序输出斐波那契數列的前 N 个数是...

    于小勇
  • Python yield 使用浅析

    您可能听说过,带有 yield 的函数在 Python 中被称之为 generator(生成器),何谓 generator ?

    bear_fish
  • DOM

    天天_哥
  • 机器学习入门必备的13张小抄(附下载)

    允中 编译整理 量子位 出品 | 公众号 QbitAI 那么多机器学习工具包,那么多命令、操作和公式,想要全部记住,实在是太难了…… 所以,小抄是人见人爱的好东...

    量子位

扫码关注云+社区

领取腾讯云代金券