HTML5新增的3種選擇器

liuhongyu666發表於2017-09-10
HTML

引言

在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>

總結

相容性：IE8+
動態靜態：q  靜態; g  動態
效能：$  > q > g

相關文章