Element

除了document對象谭贪，在DOM中最常用的就是Element對象了，Element對象表示HTML元素。

Element 對象可以擁有類型為元素節(jié)點会放、文本節(jié)點顷蟆、注釋節(jié)點的子節(jié)點诫隅，DOM提供了一系列的方法可以進行元素的增、刪帐偎、改逐纬、查操作

Element有幾個重要屬性

nodeName：元素標簽名，還有個類似的tagName
nodeType：元素類型
className：類名
id：元素id
children：子元素列表（HTMLCollection）
childNodes：子元素列表（NodeList）
firstChild：第一個子元素
lastChild：最后一個子元素
nextSibling：下一個兄弟元素
previousSibling：上一個兄弟元素
parentNode削樊、parentElement：父元素
查詢元素

getElementById()

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

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

getElementsByClassName()

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

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

document.getElementsByClassName('red test');

getElementsByTagName()

getElementsByTagName方法返回所有指定標簽的元素（搜索范圍包括本身）树碱。返回值是一個HTMLCollection對象肯适，也就是說，搜索結(jié)果是一個動態(tài)集合成榜，任何元素的變化都會實時反映在返回的集合中框舔。這個方法不僅可以在document對象上調(diào)用，也可以在任何元素節(jié)點上調(diào)用。

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

getElementsByName()

getElementsByName方法用于選擇擁有name屬性的HTML元素福贞，比如form、img停士、frame挖帘、embed和object，返回一個NodeList格式的對象恋技，不會實時反映元素的變化拇舀。

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

querySelector()

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

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

querySelectorAll()

querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點枪芒，返回的是NodeList類型的對象。NodeList對象不是動態(tài)集合谁尸，所以元素節(jié)點的變化無法實時反映在返回結(jié)果中。

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

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

創(chuàng)建元素

createElement()

createElement方法用來生成HTML元素節(jié)點决瞳。

var newDiv = document.createElement("div");
createElement方法的參數(shù)為元素的標簽名，即元素節(jié)點的tagName屬性左权。如果傳入大寫的標簽名皮胡，會被轉(zhuǎn)為小寫。如果參數(shù)帶有尖括號（即<和>）或者是null赏迟，會報錯屡贺。

createTextNode()

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

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

createDocumentFragment()

createDocumentFragment方法生成一個DocumentFragment對象甩栈。

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

修改元素

appendChild()

在元素末尾添加元素

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

insertBefore()

在某個元素之前插入元素

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

replaceChild()

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

newDiv.replaceChild(newElement, oldElement);

刪除元素

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

parentNode.removeChild(childNode);

clone元素

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

node.cloneNode(true);

屬性操作

getAttribute()

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

node.getAttribute('id');

createAttribute()

createAttribute()方法生成一個新的屬性對象節(jié)點，并返回它蛤克。

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
當然上面的方法做的事情也可以通過類操作數(shù)組屬性element.attributes來實現(xiàn)

innerText

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

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

innerHTML

innerHTML屬性作用和innerText類似，但是不是返回元素的文本內(nèi)容筋现，而是返回元素的HTML結(jié)構(gòu)唐础，在寫入的時候也會自動構(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獲取元素計算后的樣式矾飞，不要通過 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 的新增刪除來實現(xiàn)