DOM API querySelector与querySelectorAll的用法

JavaScript 2013-09-05 HTML5,DOM,querySelector,querySelectorAll

HTML5引入了与jQuery选择器相似的DOM API querySelectorAll(),这货用起来比那个getElement**好多了!废话不多说,直接上实例。

HTML Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<div class="box"></div>		

		<div class="box">
			<p id="lost"></p>		
			<p name="qttc"></p>		
		</div>		

		<div></div>

		<div></div>

		<div class="box"></div>		
	</body>
</html>

querySelectorAll与querySelector的区别是querySelectorAll找出所有匹配的节点并返回数组,querySelector找到一个后就返回节点对象。

找出所有标签 document.querySelectorAll("*")

找出head下所有的标签 document.head.querySelectorAll("*")

FireFox下居然自动多出一个style标签

然后使用DOM树查看工具并没有这个标签

Chrome与IE下都正常

找出body标签下的第一个div标签

document.body.querySelectorAll("div")[0]

document.body.querySelector("div")

找出所有class=box的标签 document.querySelectorAll(".box")

找出所有class=boxdiv标签 document.querySelectorAll("div.box")

找出所有id=lost的标签 document.querySelectorAll("#lost")

找出所有p标签并且id=lost的标签 document.querySelectorAll("p#lost")

找出所有name=qttc的标签 document.querySelectorAll("*[name=qttc]")

找出所有存在name属性的标签 document.querySelectorAll("*[name]")

找出所有class=hot并且存在name属性的p标签 

document.querySelectorAll("p.hot[name]")

document.querySelectorAll("p[class=hot][name]")

文字链接:《DOM API querySelector与querySelectorAll的用法

文章地址:http://www.qttc.net/201309371.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 4