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

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

Element類(lèi)型用于表現(xiàn)HTML或XML元素。HTMLElement類(lèi)型繼承自Element類(lèi)型。并添加了一些屬性。

HTMLElement.__proto__ === Element// true

讀取

添加的屬性:可讀也可寫(xiě)

id

title

lang(很少使用)

dir(很少使用)

className:與元素的class特性對(duì)應(yīng)。

dataset:HTML5規(guī)定可以為元素添加非標(biāo)準(zhǔn)的屬性，但要添加前綴data-,目的是為元素提供與渲染無(wú)關(guān)的信息，或者提供語(yǔ)義信息。這些屬性可以任意添加，隨機(jī)命名，只要以data-開(kāi)頭即可。可以通過(guò)元素的dataset屬性來(lái)訪問(wèn)自定義屬性

    


    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);

相關(guān)方法

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

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

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

DOM methods dealing with element"s attributes:

attributes屬性

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

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("");
}

操作類(lèi)名時(shí)，需要通過(guò)className屬性添加、刪除、和替換類(lèi)名。因?yàn)?b>className是一個(gè)字符串，所以即使只修改字符串一部分，也必須每次都設(shè)置整個(gè)字符串的值。

    


    // 刪除"user"類(lèi)

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

    // 找到要?jiǎng)h的類(lèi)名
    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);

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

為了從div中刪除class屬性中的"user",以上這些代碼都是必須的。很多javascript都實(shí)現(xiàn)了這個(gè)方法，以簡(jiǎn)化這些操作

classList

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

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

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

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

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

Browser Compatibility

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

第一個(gè)參數(shù)必須是下列值之一:

beforebegin:在當(dāng)前元素之前插入一個(gè)緊鄰的同輩元素

afterbegin:在當(dāng)前元素之下插入一個(gè)新的子元素或在第一個(gè)子元素之前再插入新的子元素

beforeend:在當(dāng)前元素之下插入一個(gè)新的的子元素或在最后一個(gè)子元素之后插入新的子元素

afterend:在當(dāng)前元素之后插入一個(gè)緊鄰的同輩元素

瀏覽器兼容性

包含的是可以照字面意思接收的純文本內(nèi)容。

 


HELLO WORLD!

DOM文檔中存在相鄰的同胞文本節(jié)點(diǎn)很容易導(dǎo)致混亂，因?yàn)榉植磺迥膫€(gè)文本節(jié)點(diǎn)表示哪個(gè)字符串。

瀏覽器在解析文檔時(shí)，永遠(yuǎn)不會(huì)創(chuàng)建相鄰的文本節(jié)點(diǎn)。

出現(xiàn)相鄰的文本節(jié)點(diǎn)只會(huì)作為執(zhí)行DOM操作的結(jié)果出現(xiàn)

如果在一個(gè)包含兩個(gè)或多個(gè)文本節(jié)點(diǎn)的父元素上調(diào)用，Node類(lèi)型的normalize()方法，則會(huì)將所有文本節(jié)點(diǎn)合并成一個(gè)節(jié)點(diǎn)。

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():這個(gè)方法會(huì)將一個(gè)文本節(jié)點(diǎn)分成兩個(gè)文本節(jié)點(diǎn)，即按照指定的位置分割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"

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

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

// 創(chuàng)建第一行
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"));

// 創(chuàng)建第二行
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);

可以通過(guò)Document類(lèi)型和Element類(lèi)型的實(shí)例調(diào)用他們。

1.querySelector()
2.querySelectorAll()

Browser Compatibility-querSelector
Browser Compatibility-querSelectorAll

Note:

不像如getElementsByTagName這樣的API, 通過(guò)以上兩個(gè)API返回的對(duì)象不是live的。也就是說(shuō)當(dāng)文檔改變的時(shí)候，他們不會(huì)改變。

具體來(lái)說(shuō)，返回的值實(shí)際上是帶有所有屬性和方法的NodeList，而其底層實(shí)現(xiàn)則類(lèi)似于一組元素的快照，而非不斷對(duì)文檔進(jìn)行搜索的 動(dòng)態(tài)查詢。這樣實(shí)現(xiàn)可以避免使用NodeList對(duì)象通常會(huì)引起的大多數(shù)性能問(wèn)題

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

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

Browser Compatibility

NodeList及其近親NameNodeMap和HTMLCollection這個(gè)三個(gè)集合都是動(dòng)態(tài)的。也就是說(shuō)每當(dāng)文檔結(jié)構(gòu)發(fā)生變化，他們都會(huì)得到更新。
本質(zhì)上:NodeList對(duì)象是在訪問(wèn)DOM文檔時(shí)實(shí)時(shí)運(yùn)行的查詢。

DOM操作往往是Javascript程序中開(kāi)銷(xiāo)最大的部分，而因訪問(wèn)NodeList導(dǎo)致的問(wèn)題最大。一般來(lái)說(shuō)，盡量減少訪問(wèn)NodeList的次數(shù)。因?yàn)槊看卧L問(wèn)NodeList，都會(huì)運(yùn)行一次基于文檔的查詢。所以，可以考慮將從NodeList取得的值緩存起來(lái)。或者盡量減少DOM操作

對(duì)于元素間的空格，IE9以及之前不會(huì)返回文本節(jié)點(diǎn)，而其他所有瀏覽器都會(huì)返回文本節(jié)點(diǎn)。這樣就導(dǎo)致了在使用childNodes和firstChild等屬性時(shí)的行為不一致。為了彌補(bǔ)這一差異。

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

childElementCount:返回子元素(不包括文本節(jié)點(diǎn)和注釋)的個(gè)數(shù)

firstElementChild:指向第一個(gè)子元素;firstChild的元素版

lastElementChild:指向最后一個(gè)子元素;lastChild的元素版

previousElementSibling:指向前一個(gè)同輩元素;previousSibling的元素版

nexrtElementSibling:指向后一個(gè)同輩元素;nextSibling的元素版

Browser Compatibility

這個(gè)style對(duì)象是CSSStyleDeclaration的實(shí)例，包含著通過(guò)HTML的style特性指定的所有樣式信息，但不包含與外部樣式表經(jīng)層疊而來(lái)的樣式。

cssText

length

item(index)

getPropertyValue(propertyName)

removeProperty(propertyName)

setProperty(propertyName, value, priority)

getPropertyCSSValue(propertyName)

getPropertyPriority

parentRule

NOTE:

"DOM2級(jí)樣式"規(guī)范規(guī)定樣式對(duì)象上的相應(yīng)屬性名應(yīng)該是cssFloat。而IE則支持的是styleFloat。

對(duì)于使用短劃線(例如background-image)的CSS屬性名，必須將其轉(zhuǎn)換成駝峰大小寫(xiě)形式，才能通過(guò)Javascript來(lái)訪問(wèn)。

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

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

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

NOTE:無(wú)論在哪個(gè)瀏覽器，所有計(jì)算的樣式都是只讀的。

CSSStyleSheet類(lèi)型表示的是樣式表，包括通過(guò)元素的樣表和在