HTML5實戰與剖析之CSS選擇器－querySelector()

　　今天為大家介紹一下HTML5的相關知識，今兒主要以新增的選擇器為主題，為大家介紹。今天為大家介紹的選擇器是querySelector()。我將以jQuery和JavaScript兩種寫法比較的方式為大家分享。希望能為大家在學習HTML5的道路上有所幫助。

　　querySelector()方法接收一個CSS選擇符，返回與該模式匹配的第一個元素，如果沒有找到匹配的元素，返回null。小例子如下：

　　1)取得標籤

　　　　

　　

jQuery程式碼

var body = document.querySelector('body');

	body.style.background = "red";

	alert(body)//[object HTMLpElement]

　　預覽效果

　　

1、JavaScript

　　2)取得ID

HTML程式碼

var $body = $("body");

$body.css({
	'background': "red"
});

alert($body) //[object Object]

JavaScript程式碼

<p id="box1" class="box">梦龙小站</p>
<section id="box2" class="box">梦龙小站</section>

jQuery程式碼

var box1 = document.querySelector('#box1');

	box1.innerHTML = "这是box1";

	alert(box1)//[object HTMLpElement]

jQuery程式碼

2、jQuery

　　透過document類型呼叫querySelector()方法的時候，會在文檔元素的範圍內尋找符合的元素。而透過element類型呼叫querySelector()方法的時候，只會在該元素後代元素的範圍內尋找匹配元素。 CSS選擇符可以簡單也可以複雜，顯示情況而定。如果傳入了不被支援的選擇符，querySelector()會報錯。

　　HTML5實戰與剖析之CSS選擇器－querySelector()就為大家介紹到這裡了。考慮到HTML5這方面要花的經驗比較大一些，裡面的東西比較多，所以具體的小知識點會一篇一篇的介紹，所以每篇的篇幅不一定會很多。希望大家能夠理解一下，這樣做的好處就為了將來能夠方便找到。感謝大家的支持與愛，更多有關HTML5的相關內容請留意夢龍小站關於HTML5實戰與剖析的更新。

以上就是的內容，更多相關內容請關注PHP中文網（www.php.cn）！