HTML 4主角有：getElementsByName()，getElementsByTagName()
HTML 4派出兩位主角分別是getElementsByName()與getElementsByTagName()。
- getElementsByName(屬性名稱)：以元素屬性 name="value" 的value來取得所有符合名稱的元素集合。
- getElementsByTagName(元素名稱)：以元素名稱，例如"p",來取得所有p元素集合。
HTML5主角有：getElementsByClassName()，querySelectorAll()
HTML5派出兩位主角分別是getElementsByClassName()與querySelectorAll()。
- getElementsByClassName(類別名稱)：以元素屬性 class="value" 的value來取得所有符合名稱的元素集合。
- querySelectorAll("CSS Selector")：直接透過CSS選擇器規則來進行選取，符合CSS選擇器規則(支援CSS3的虛擬類別)的元素將被選取。
又深又長的DOM
以下JavaScript程式要建立一個又深又長的DOM，以增加走訪DOM的難度。
// 先在頁面上新增一個元素
var test = document.getElementById("test");
for (var i = 0; i < 1000; i++) {
var d = document.createElement("div");
d.setAttribute("id", "div" + i);
d.setAttribute("class", "div100")
for (var j = 0; j <= 1000; j++) {
var para = document.createElement("p");
para.setAttribute("class", "sale");
para.setAttribute("name", "sale");
var txt = document.createTextNode(j);
para.appendChild(txt);
d.appendChild(para);
}
// 讓層數加深
if (i === 0) {
test.appendChild(d);
} else {
var dp = document.getElementById("div" + (i - 1));
dp.appendChild(d);
}
}
每一個div裡有1001個p元素，第1002個是div元素，再包1001個p元素，第1002個是div元素...會有1000層的深度及1001000個p元素。
// 測試取得大量元素的時間
var star_time = new Date();
var select_para = document.getElementsByName("sale");
//var select_para = document.getElementsByTagName("p");
//var select_para = document.getElementsByClassName("sale");
//var select_para = document.querySelectorAll("p");
//var select_para = document.querySelectorAll(".sale");
var end_time = new Date();
console.log("取得p元素個數: " + select_para.length);
console.log("Start: " + star_time.getMinutes() + ":" +
star_time.getSeconds() + ":" +
star_time.getMilliseconds() +
", time: " + star_time.getTime());
console.log("End: " + end_time.getMinutes() + ":" +
end_time.getSeconds() + ":" +
end_time.getMilliseconds() +
", time: " + end_time.getTime());
這邊讓我偷懶一下，用偷懶的寫法。這樣就可以取得每個大量元素選取器的執行時間。
