Element

除了document對(duì)象，在DOM中最常用的就是Element對(duì)象了，Element對(duì)象表示HTML元素。

Element 對(duì)象可以擁有類型為元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、注釋節(jié)點(diǎn)的子節(jié)點(diǎn)，DOM提供了一系列的方法可以進(jìn)行元素的增、刪、改、查操作

Element有幾個(gè)重要屬性

nodeName：元素標(biāo)簽名，還有個(gè)類似的tagName
nodeType：元素類型
className：類名
id：元素id
children：子元素列表（HTMLCollection）
childNodes：子元素列表（NodeList）
firstChild：第一個(gè)子元素
lastChild：最后一個(gè)子元素
nextSibling：下一個(gè)兄弟元素
previousSibling：上一個(gè)兄弟元素
parentNode、parentElement：父元素
查詢?cè)?/p>

getElementById()

getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。這也是獲取一個(gè)元素最快的方法

var elem = document.getElementById("test");

getElementsByClassName()

getElementsByClassName方法返回一個(gè)類似數(shù)組的對(duì)象（HTMLCollection類型的對(duì)象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實(shí)時(shí)反映在返回結(jié)果中。這個(gè)方法不僅可以在document對(duì)象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用。

var elements = document.getElementsByClassName('tab');
getElementsByClassName方法的參數(shù)，可以是多個(gè)空格分隔的class名字，返回同時(shí)具有這些節(jié)點(diǎn)的元素。

document.getElementsByClassName('red test');

getElementsByTagName()

getElementsByTagName方法返回所有指定標(biāo)簽的元素（搜索范圍包括本身）。返回值是一個(gè)HTMLCollection對(duì)象，也就是說，搜索結(jié)果是一個(gè)動(dòng)態(tài)集合，任何元素的變化都會(huì)實(shí)時(shí)反映在返回的集合中。這個(gè)方法不僅可以在document對(duì)象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用。

var paras = document.getElementsByTagName("p");
上面代碼返回當(dāng)前文檔的所有p元素節(jié)點(diǎn)。注意，getElementsByTagName方法會(huì)將參數(shù)轉(zhuǎn)為小寫后，再進(jìn)行搜索。

getElementsByName()

getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個(gè)NodeList格式的對(duì)象，不會(huì)實(shí)時(shí)反映元素的變化。

// 假定有一個(gè)表單是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"
注意，在IE瀏覽器使用這個(gè)方法，會(huì)將沒有name屬性、但有同名id屬性的元素也返回，所以name和id屬性最好設(shè)為不一樣的值。

querySelector()

querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件，則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。

var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
querySelector方法無法選中CSS偽元素。

querySelectorAll()

querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類型的對(duì)象。NodeList對(duì)象不是動(dòng)態(tài)集合，所以元素節(jié)點(diǎn)的變化無法實(shí)時(shí)反映在返回結(jié)果中。

elementList = document.querySelectorAll(selectors);
querySelectorAll方法的參數(shù)，可以是逗號(hào)分隔的多個(gè)CSS選擇器，返回所有匹配其中一個(gè)選擇器的元素。

var matches = document.querySelectorAll("div.note, div.alert");
上面代碼返回class屬性是note或alert的div元素。

創(chuàng)建元素

createElement()

createElement方法用來生成HTML元素節(jié)點(diǎn)。

var newDiv = document.createElement("div");
createElement方法的參數(shù)為元素的標(biāo)簽名，即元素節(jié)點(diǎn)的tagName屬性。如果傳入大寫的標(biāo)簽名，會(huì)被轉(zhuǎn)為小寫。如果參數(shù)帶有尖括號(hào)（即<和>）或者是null，會(huì)報(bào)錯(cuò)。

createTextNode()

createTextNode方法用來生成文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容。

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
上面代碼新建一個(gè)div節(jié)點(diǎn)和一個(gè)文本節(jié)點(diǎn)

createDocumentFragment()

createDocumentFragment方法生成一個(gè)DocumentFragment對(duì)象。

var docFragment = document.createDocumentFragment();
DocumentFragment對(duì)象是一個(gè)存在于內(nèi)存的DOM片段，但是不屬于當(dāng)前文檔，常常用來生成較復(fù)雜的DOM結(jié)構(gòu)，然后插入當(dāng)前文檔。這樣做的好處在于，因?yàn)镈ocumentFragment不屬于當(dāng)前文檔，對(duì)它的任何改動(dòng)，都不會(huì)引發(fā)網(wǎng)頁的重新渲染，比直接修改當(dāng)前文檔的DOM有更好的性能表現(xiàn)。

修改元素

appendChild()

在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

insertBefore()

在某個(gè)元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

replaceChild()

replaceChild()接受兩個(gè)參數(shù)：要插入的元素和要替換的元素

newDiv.replaceChild(newElement, oldElement);

刪除元素

刪除元素使用removeChild()方法即可

parentNode.removeChild(childNode);

clone元素

cloneNode()方法用于克隆元素，方法有一個(gè)布爾值參數(shù)，傳入true的時(shí)候會(huì)深復(fù)制，也就是會(huì)復(fù)制元素及其子元素（IE還會(huì)復(fù)制其事件），false的時(shí)候只復(fù)制元素本身

node.cloneNode(true);

屬性操作

getAttribute()

getAttribute()用于獲取元素的attribute值

node.getAttribute('id');

createAttribute()

createAttribute()方法生成一個(gè)新的屬性對(duì)象節(jié)點(diǎn)，并返回它。

attribute = document.createAttribute(name);
createAttribute方法的參數(shù)name，是屬性的名稱。

setAttribute()

setAttribute()方法用于設(shè)置元素屬性

var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");
等同于

var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);

removeAttribute()

removeAttribute()用于刪除元素屬性

node.removeAttribute('id');
element.attributes
當(dāng)然上面的方法做的事情也可以通過類操作數(shù)組屬性element.attributes來實(shí)現(xiàn)

innerText

innerText是一個(gè)可寫屬性，返回元素內(nèi)包含的文本內(nèi)容，在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容

<div>
<p>
123
<span>456</span>
</p>
</div>
外層div的innerText返回內(nèi)容是 "123456"

innerHTML

innerHTML屬性作用和innerText類似，但是不是返回元素的文本內(nèi)容，而是返回元素的HTML結(jié)構(gòu)，在寫入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM

<div>
<p>
123
<span>456</span>
</p>
</div>
外層div的innerHTML返回內(nèi)容是 "<p>123<span>456</span></p>"

修改樣式

可修改元素的 style 屬性，修改結(jié)果直接反映到頁面元素

document.querySelector('p').style.color = 'red'
document.querySelector('.box').style.backgroundColor = '#ccc'
獲取樣式 getComputedStyle
使用getComputedStyle獲取元素計(jì)算后的樣式，不要通過 node.style.屬性 獲取

var node = document.querySelector('p')
var color = window.getComputedStyle(node).color
console.log(color)

class 操作

var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active') //新增 class
nodeBox.classList.remove('active') //刪除 class
nodeBox.classList.toggle('active') //新增/刪除切換
node.classList.contains('active') // 判斷是否擁有 class
樣式的改變盡量使用 class 的新增刪除來實(shí)現(xiàn)