DOM擴(kuò)展
1柏锄、選擇符API
1.1querySelector()方法
//取得body元素
var body = document.querySelector("body");
//取得ID為“myDiv”的元素
var myDiv = document.querySelector("#myDiv");
//取得類為“selected”的第一個(gè)元素
var selected = document.querySelector(".selected");
//取得類為“button”的第一個(gè)圖像元素
var img = document.querySelector("img.button")
1.2querySelectorAll()方法
querySelectorAll()也是一個(gè)CSS選擇符 返回值是帶有所有屬性和方法的NodeLIst
//取得某<div>中所有的<em>元素
var selected = document.getElementById("myDiv").querySelectorAll("em");
//取得類為“selected”的所有元素
var selecteds = document.querySelectorAll(".selected");
//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");
item()方法：取得nodelist中每一個(gè)元素
1.3matchesSelector()方法
matchesSelector()方法：如果調(diào)用元素與該選擇符匹配返回true 否則返回false
2、元素遍歷
Element TraversalAPI 為DOM元素增加以下5個(gè)屬性
childElementCount 返回子元素的個(gè)數(shù)
firstElementChild 指向第一個(gè)子元素
lastElementChild 指向最后一個(gè)子元素
previousElementSibling 指向前一個(gè)同輩元素
nextElementSibling 指向后一個(gè)同輩元素
3纬朝、HTML5
3.1與類相關(guān)的擴(kuò)充
getElementsByClassName()方法
//取得所有類中包含“useename”和current的元素峡继，類名的先后順序無(wú)所謂
var all = document.getElementsByClassName("username current");
//取得ID為“myDiv”的元素中帶有類名“selected”的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");
classList屬性
add(value):將給定的字符串添加到列表中，如果值已經(jīng)存在，就不添加了劳闹。
contains(value):表示列表中是否存在給定的值，如果存在則返回true,否則返回fales
remove(value):從列表中刪除給定的字符串洽瞬。
toggle(value):如果列表中已經(jīng)存在給定的值本涕，刪除它；如果列表中沒(méi)有給定的值伙窃，添加它
div.classList.remove("user");
//刪除“disabled”類
div.classList.remove("disabled");
//添加“current”類
div.classList.add("current");
//切換“user”類
div.classList.toggle("user");
//確定元素中是否包含既定的類名
if(div.classList.contains("bd") && !div.classList.contains("disabled")){
//執(zhí)行操作
}
//迭代類名
for(var i=0, len=div.classList.length; i<len; i++){
dosomething(div.classList[i]);
}
3.2焦點(diǎn)管理
document.activeElement屬性獲取焦點(diǎn)的元素
focus（）方法
var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus());//true
3.3HTMLDocument的變化
readyState屬性有兩個(gè)可能值
loading,正在加載文檔
complete菩颖，已經(jīng)加載完文檔
head屬性
var head = document.head || document.getElementsByTagName("head")[0];
3.4字符集屬性
3.5自定義數(shù)據(jù)屬性
3.6插入標(biāo)記
innerHTML屬性
div.innerHTML = "hello world!";
DOM2和DOM3
訪問(wèn)元素的樣式
css規(guī)則
cssText:返回整條規(guī)則對(duì)應(yīng)的文本
parentRule：如果當(dāng)前規(guī)則是導(dǎo)入的規(guī)則，這個(gè)屬性引用的就是導(dǎo)入規(guī)則为障；否則這個(gè)值為null
parentStyleSheet:當(dāng)前規(guī)則所屬的樣式表
selectorText:返回當(dāng)前規(guī)則的選擇符文本
style:一個(gè)CSSStyleDeclaration對(duì)象晦闰，可以通過(guò)它設(shè)置和取得規(guī)則中特定的樣式值
type：表示規(guī)則類型的常量值
