HTML5新增的3种选择器

最新推荐文章于 2023-10-07 22:30:05 发布

liuhongyu666

最新推荐文章于 2023-10-07 22:30:05 发布

阅读量1k

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/liuhongyu666/article/details/77919221

版权

引言

在HTML5中，DOM拓展了querySelectorAll()、querySelector()和matchesSelector()这3种方法，通过CSS选择符查询DOM文档取得元素的引用的功能变成了原生的API，解析和树查询操作在浏览器内部通过编译后的代码来完成，极大地改善了性能。本文将详细介绍html5新增的3种selector方法以及和ES3中选择器的对比。

方法

querySelector()

querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。该方法既可用于文档document类型，也可用于元素element类型。

<body>
	<div id="div1"></div>
	<ul>
		<li class="item">1</li>
		<li class="item">2</li>
		<li class="item">3</li>
		<li class="item">4</li>
		<li class="item">5</li>
	</ul>
	<script>
		var oDiv = document.querySelector("#div1");
		var oUl = document.querySelector("ul");
		var oLi = document.querySelector(".item");
		var oLi2 = document.querySelector("ul li");   
		alert(oLi.innerHTML);    //页面弹出1
		alert(oLi2.innerHTML);   //页面弹出1
 	</script>
</body>

querySelectorAll()

querySelectorAll()接收一个CSS选择符，返回一个类数组对象NodeList的实例，没有匹配元素时，返回空的类数组对象，而不是null。

<body>
	<div class="div1"></div>
	<ul>
		<li class="item">1</li>
		<li class="item">2</li>
		<li class="item">3</li>
		<li class="item">4</li>
		<li class="item">5</li>
	</ul>
	<script>
		var oLi = document.querySelectorAll(".item");
		for (var i = 0; i < oLi.length; i++) {
			alert(oLi[i].innerHTML);   //页面弹出1,2,3,4,5
		}
	</script>
</body>

matchesSelector()

matchesSelector()方法接收一个CSS选择符参数，如果调用元素与该选择符相匹配，返回true；否则返回false。由于兼容性问题，现在各个浏览器都只支持加前缀的方法。

<body class="test">
	<script>
		function matchesSelector(element,selector){
			if(element.matchesSelector){
			    return element.matchesSelector(selector);
			}
			if(element.msMatchesSelector){
			    return element.msMatchesSelector(selector);
			}
			if(element.mozMatchesSelector){
			    return element.mozMatchesSelector(selector);
			}
			if(element.webkitMatchesSelector){
			    return element.webkitMatchesSelector(selector);
			}            
		}
		alert(matchesSelector(document.body,'.test'));   //页面弹出true
	</script>
</body>