简介
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
代码如下:
element = document.queryselector('p#container');//返回id为container的首个p
element = document.queryselector('.foo,.bar');//返回带有foo或者bar样式类的首个元素
queryselectorall
该方法返回所有满足条件的元素,结果是个nodelist集合。查找规则与前面所述一样。
elements = document.queryselectorall('p.foo');//返回所有带foo类样式的p
需要注意的是返回的nodelist集合中的元素是非实时的.
如对本文有疑问, 点击进行留言回复!!
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论