JavaScript高程第三版筆記-DOM擴展

在那個刀耕火種的年代,用過jQuery的都體會到了jQuery帶來的便捷,尤爲是元素選擇器.

jQuery(www.jquery.com)的核心就是經過 CSS 選擇符查詢 DOM 文檔取得元素的引用，從而拋開了getElementById()和 getElementsByTagName()。

08年以前,針對dom操做,爲了實現更多的功能,各大瀏覽器廠商會有一些專有的DOM擴展,此後W3C着手將一些已經成爲事實標準的專有擴展標準化並寫到規範中去.

其中包括兩個主要的擴展:SlectorsAPI和HTML5.

1、SlectorsAPI

querySelector()方法接收一個 CSS 選擇符，返回與該模式匹配的第一個元素，若是沒有找到匹配的元素，返回 null;

//取得 body 元素
var body = document.querySelector("body");
//取得 ID 爲"myDiv"的元素
var myDiv = document.querySelector("#myDiv");
//取得類爲"selected"的第一個元素
var selected = document.querySelector(".selected");
//取得類爲"button"的第一個圖像元素
var img = document.body.querySelector("img.button");

querySelectorAll()方法接收的參數與 querySelector()方法同樣，都是一個 CSS 選擇符，但返回的是全部匹配的元素而不單單是一個元素。這個方法返回的是一個NodeList 的實例。

//取得某<div>中的全部<em>元素(相似於 getElementsByTagName("em"))
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得類爲"selected"的全部元素
var selecteds = document.querySelectorAll(".selected");
//取得全部<p>元素中的全部<strong>元素
var strongs = document.querySelectorAll("p strong");

var i, len, strong;
for (i=0, len=strongs.length; i < len; i++){
    strong = strongs[i]; //或者 strongs.item(i)
    strong.className = "important";
}