document.images:包含文檔中所有的元素

document.links:包含文檔中所有帶href特性的a元素

Element類型用于表現HTML或XML元素。HTMLElement類型繼承自Element類型。并添加了一些屬性。

HTMLElement.__proto__ === Element// true

讀取

添加的屬性:可讀也可寫

id

title

lang(很少使用)

dir(很少使用)

className:與元素的class特性對應。

dataset:HTML5規定可以為元素添加非標準的屬性，但要添加前綴data-,目的是為元素提供與渲染無關的信息，或者提供語義信息。這些屬性可以任意添加，隨機命名，只要以data-開頭即可。可以通過元素的dataset屬性來訪問自定義屬性

    


    var div = document.getElementById("bd");
    console.log(div.id);
    console.log(div.className);
    console.log(div.title);
    console.log(div.lang);
    console.log(div.dir);

相關方法

getAttribute():一般只有在取自定義特性情況下，才會使用此方法

setAttribute():接收兩個參數，要設置特性的特性名和值

removeAttribute():用于徹底刪除元素的特性

DOM methods dealing with element"s attributes:

attributes屬性

attributes屬性中包含一個NamedNodeMap,與NodeList類似。
通常用于遍歷元素的特性。

function outputAttributes ( ele ) {
    var pairs = [],
    attrName,
    attrValue,
    i,
    len;

    for(i = 0; i < ele.attributes.length; i++) {
        attrName = ele.attributes[i].nodeName;
        attrValue = ele.attributes[i].nodeValue;
        pairs.push(attrName + "=" + attrValue + """)
    }
    pairs.join("");
}

操作類名時，需要通過className屬性添加、刪除、和替換類名。因為className是一個字符串，所以即使只修改字符串一部分，也必須每次都設置整個字符串的值。

    


    // 刪除"user"類

    // 首先取得類名字字符并拆分成數組
    var div = document.getElementsByTagName("div")[0];
    var className = div.className.split(/s+/);

    // 找到要刪的類名
    var pos = -1,
        i,
        len

    for(i = 0,len = className.length;i < len;i++) {
        if(className[i] === "user") {
            pos = i;
            break;
        }
    }

    className.splice(i,1);

    // 把剩下的類名拼成字符串并重新設置
    div.className = className.join(" ");

為了從div中刪除class屬性中的"user",以上這些代碼都是必須的。很多javascript都實現了這個方法，以簡化這些操作

classList

HTML5新增了一個操作類名的方式，可以讓操作更簡單也更安全。那就是為所有元素添加classList這個屬性。這個classList屬性是新集合類型DOMTokenList的實例。這個屬性是只讀的，有一個表示自己包含多少元素的length屬性，而要取得每個元素可以使用item()方法，也可以使用方括號語法。如果你想修改classList屬性，那么可以通過它定義的以下幾個方法進行修改。

add(value):將給定的字符串值添加到列表中。如果值已經存在，就不添加了

remove(value):從列表中刪除給定的字符串

contain(value):表示列表中是否存在給定的值，如果存在則返回true,不存在返回false

toggle(value):如果列表中已經存在給定的值，刪除它;如果列表中沒有給定的值，添加它

Browser Compatibility

insertAdjacentHTML():接收兩個參數，插入位置和要插入的HTML文本

第一個參數必須是下列值之一:

beforebegin:在當前元素之前插入一個緊鄰的同輩元素

afterbegin:在當前元素之下插入一個新的子元素或在第一個子元素之前再插入新的子元素

beforeend:在當前元素之下插入一個新的的子元素或在最后一個子元素之后插入新的子元素

afterend:在當前元素之后插入一個緊鄰的同輩元素

瀏覽器兼容性

包含的是可以照字面意思接收的純文本內容。

 


HELLO WORLD!

DOM文檔中存在相鄰的同胞文本節點很容易導致混亂，因為分不清哪個文本節點表示哪個字符串。

瀏覽器在解析文檔時，永遠不會創建相鄰的文本節點。

出現相鄰的文本節點只會作為執行DOM操作的結果出現

如果在一個包含兩個或多個文本節點的父元素上調用，Node類型的normalize()方法，則會將所有文本節點合并成一個節點。

var ele = document.createElement("div");
var text1 = document.createTextNode("Hello World!");
var text2 = document.createTextNode("Hi");
ele.appendChild(text1);
ele.appendChild(text2);

document.body.appendChild(ele)

console.log(ele.childNodes.length);// 2
ele.normalize();
console.log(ele.childNodes.length);// 1

splitText():這個方法會將一個文本節點分成兩個文本節點，即按照指定的位置分割nodeValue值。

var ele = document.createElement("div");
var text = document.createTextNode("Hello World!");
ele.appendChild(text);

document.body.appendChild(ele)

var newNode = ele.firstChild.splitText(5);
console.log(newNode.nodeValue);// " World"

// 創建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

// 創建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

// 創建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1.1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2.1"));

// 創建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1.2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2.1"));

// 添加到文檔中
document.body.appendChild(table);

可以通過Document類型和Element類型的實例調用他們。

1.querySelector()
2.querySelectorAll()

Browser Compatibility-querSelector
Browser Compatibility-querSelectorAll

Note:

不像如getElementsByTagName這樣的API, 通過以上兩個API返回的對象不是live的。也就是說當文檔改變的時候，他們不會改變。

具體來說，返回的值實際上是帶有所有屬性和方法的NodeList，而其底層實現則類似于一組元素的快照，而非不斷對文檔進行搜索的 動態查詢。這樣實現可以避免使用NodeList對象通常會引起的大多數性能問題

3.document.getElementsByTagName():返回包含0或多個元素的NodeList。在HTML文檔中，這個方法會返回一個 HTMLCollection對象，作為一個動態集合，該對象與NodeList非常相似。

4.getElementsByClassName():返回HTMLCollection對象，所以使用這個方法與使用getElementsByTagName()以及其他返回NodeList的DOM方法具有同樣的性能問題

Browser Compatibility

NodeList及其近親NameNodeMap和HTMLCollection這個三個集合都是動態的。也就是說每當文檔結構發生變化，他們都會得到更新。
本質上:NodeList對象是在訪問DOM文檔時實時運行的查詢。

DOM操作往往是Javascript程序中開銷最大的部分，而因訪問NodeList導致的問題最大。一般來說，盡量減少訪問NodeList的次數。因為每次訪問NodeList，都會運行一次基于文檔的查詢。所以，可以考慮將從NodeList取得的值緩存起來。或者盡量減少DOM操作

對于元素間的空格，IE9以及之前不會返回文本節點，而其他所有瀏覽器都會返回文本節點。這樣就導致了在使用childNodes和firstChild等屬性時的行為不一致。為了彌補這一差異。

Element Tranversal API為DOM元素添加了以下5個屬性

childElementCount:返回子元素(不包括文本節點和注釋)的個數

firstElementChild:指向第一個子元素;firstChild的元素版

lastElementChild:指向最后一個子元素;lastChild的元素版

previousElementSibling:指向前一個同輩元素;previousSibling的元素版

nexrtElementSibling:指向后一個同輩元素;nextSibling的元素版

Browser Compatibility

這個style對象是CSSStyleDeclaration的實例，包含著通過HTML的style特性指定的所有樣式信息，但不包含與外部樣式表經層疊而來的樣式。

cssText

length

item(index)

getPropertyValue(propertyName)

removeProperty(propertyName)

setProperty(propertyName, value, priority)

getPropertyCSSValue(propertyName)

getPropertyPriority

parentRule

NOTE:

"DOM2級樣式"規范規定樣式對象上的相應屬性名應該是cssFloat。而IE則支持的是styleFloat。

對于使用短劃線(例如background-image)的CSS屬性名，必須將其轉換成駝峰大小寫形式，才能通過Javascript來訪問。

getComputeStyle():
接收兩個參數，第一個參數為，要取得計算樣式的元素和一個偽元素字符串。
返回一個CSSStyleDeclaration對象，其中包含當前元素的所有計算的樣式。

// IE
var myDiv = document.getElementById("myDiv");
var computeStyle = myDiv.style.currentStyle

// 其他瀏覽器
var computeStyle = document.defaultView.getComputedStyle(myDiv, null)

NOTE:無論在哪個瀏覽器，所有計算的樣式都是只讀的。

CSSStyleSheet類型表示的是樣式表，包括通過元素的樣表和在