HTML5中选择器querySelector的使用

996福报
• 阅读 8607

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

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

2.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会把空白也解析为一个子节点)。

点赞
收藏
评论区
推荐文章
Karen110 Karen110
3年前
一篇文章带你了解JavaScript htmldom 元素
这篇文章将教会大家如何查找和访问网页中的HTML元素。一、找到HTML元素通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。找到DOM中的HTML元素的最简单的方法,是利用元素的id。使用id"intro"找到元素:varmyElementdocument.getElementById("in
晴空闲云 晴空闲云
3年前
JavaScript中选择器函数querySelector和querySelectorAll
选择器是Css非常强大的功能,早先一般是通过getElementById和getElementsByTagName来获取页面元素,在一些场景下就很不方便。后来DOM扩展出了SelectorAPI标准,其中SelectorAPILevel1包含了querySelector和querySelectorAll两个方法,可以通过Css选择器匹配页面元素。
好买-葡萄 好买-葡萄
3年前
【数据结构与算法】—— 二分查找
1.二分查找的概念二分查找指的是在排好序的数组中,找到目标元素。如果元素存在则返回元素的下标,不存在则返回1.下面以升序为例进行简单描述2.查找过程:取数组中间元素与查找元素target比较。如果target等于中间元素则直接返回中间元素的下标,如果target小于数组中间元素则在数组左边查找,如果target大于数组中间元素则在右边查找。重复以上步骤。
菜园前端 菜园前端
2年前
常用CSS的选择器有哪些?
原文链接:选择器定义css选择器代表如何选中某个元素现实生活举例我们可以想象一个元素,其实就是一个人,那我该如何找到这个人呢?例如可以通过id选择器的方式,就像是通过身份证号码找到TA。也可以通过标签选择器找到TA,就像是通过喊TA的名字的方式。类选择器c
Stella981 Stella981
3年前
Less 嵌套
本节我们学习Less中的嵌套,嵌套应该很容易理解,HTML语言中就支持标签的嵌套。我们在使用CSS时,如果想要为多层嵌套的元素设置样式,要么给元素加上一个类选择器或ID选择器,要么使用后代选择器。例如:.xkd{fontsize:14px;}.xkdp{lineheight:25
Wesley13 Wesley13
3年前
HTML5新增的内容及API详解
querySelect()和querySelectAll()后面都是跟一个css选择器;前者返回符合条件的第一个匹配的元素,如果没有则返回Null;后者返回符合筛选条件的所有元素集合(数组),如果没有符合筛选条件的则返回空数组。document.getElementsByClass
Wesley13 Wesley13
3年前
CSS基本语法及页面引用
css基本语法及页面引用(1)css基本语法css的定义方法是:选择器{属性:值;属性:值;属性:值;}选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例:/css注释ctrlshift"/"/d
Stella981 Stella981
3年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
3年前
020_CSS3
目录如何学习CSS什么是CSS发展史快速入门css的优势三种CSS导入方式拓展:外部样式两种写法选择器基本选择器层次选择器结构伪类选择器属性选择器美化网页元素为什么要
Stella981 Stella981
3年前
Seleinum_CSS定位方式
转载:https://www.cnblogs.com/longronglang/p/9144661.htmlCSS选择器:常见符号:表示id选择器.表示class选择器\表示子元素,层级一个空格也表示子元素,但是是所有的后代子元素,相当于xpath中的相对路径一、css:属性定
Stella981 Stella981
3年前
CSS前端经典面试题及解析——小白入门必备
1.CSS选择器的优先级是如何计算的?浏览器通过优先级规则,判断元素展示哪些样式。优先级通过4个维度指标确定,我们假定以a、b、c、d命名,分别代表以下含义:1.a表示是否使用内联样式(inlinestyle)。如果使用,a为1,否则为0。2.b表示ID选择器的数量。3.c表示类选择器、属性