摘要：此文目的本文主要是整理相關的知識點，方便日后的查看和各位的查缺補漏。屬性和方法為元素節(jié)點，為屬性節(jié)點，為文本節(jié)點與返回為大寫標簽名，如。避免鏈式操作如果有返回值，則存在內存中。這個返回值包括了這個元素自己的和繼承自父元素的全部樣式。

本文主要是整理DOM相關的知識點，方便日后的查看和各位的查缺補漏。所以重在整理，并不會展開。目前還在持續(xù)整理中，打算在16日左右完結。

nodeType

Node.nodeType// 1為元素節(jié)點，2為屬性節(jié)點，3為文本節(jié)點

nodeName與tagName

elementName = Element.tagName;//返回為大寫標簽名，如DIV,IMG。一般用tagName即可。
* Attr    ------ Attr.name    屬性名
* Element ------ Element.tagName 標簽名
* Text    ------ nodeName為‘#text’，tagName為undefined

nodeValue

* Text    ------ 文本內容
* Element ------ null

attributes

//返回的是NamedNodeMap，不是ARRY。NamedNodeMap是字符串形式的名/值對。無序，且可自動更新。
//獲取參照mdn
var attr = element.attributes;
```

firstChild：表示某一節(jié)點的第一個節(jié)點

lastChild：表示某一節(jié)點的最后一個子節(jié)點

childNodes：表示所在節(jié)點的所有子節(jié)點

parentNode：表示所在節(jié)點的父節(jié)點

nextSibling：緊挨著當前節(jié)點的下一個節(jié)點

previousSibling：緊挨著當前節(jié)點的上一個節(jié)點

-方法：

Node.hasChildNodes() //　如果包含子節(jié)點就返回true

DOM節(jié)點（Node）通常對應于一個標簽，一個文本，或者一個HTML屬性。DOM節(jié)點有一個nodeType屬性用來表示當前元素的類型，它是一個整數：

Element，元素

Attribute，屬性

Text，文本

DOM節(jié)點創(chuàng)建最常用的便是document.createElement和document.createTextNode方法：

var el1 = document.createElement("div");
var node = document.createTextNode("hello world!");

getElementsByTagName等返回的實時的元素集合不需要預先獲得所有的元素信息，而.querySelectorAll()會立刻收集所有的信息到一個靜態(tài)的列表里，因而會[降低性能][2]。
可以用instanceof操作符檢查節(jié)點的原型鏈：
```
myElement.firstChild.nodeType instanceof Text
```

元素查詢的API返回的的結果是DOM節(jié)點或者DOM節(jié)點的列表。

//類似于css選擇器: 選擇classA下的classb元素
document.querySelector(".classA .classB");
// 返回選擇的第一個元素.myEl
var el = myEl.querySelector("#foo > div.bar");
// 返回一個文檔中a static NodeList，不是即時的
var els = myEl.querySelectorAll(".class");
//元素是否匹配選擇器
myElement.matches("div.bar") === true

// 返回的是HTMLCollection，即時更新的。
var el = document.getElementById("ID");
var els = document.getElementsByClassName("CLASS");
var els = document.getElementsByTagName("標簽名");
var els = document.getElementsByName("name屬性");

Element也提供了很多相對于元素的DOM導航方法：

// 獲取父元素、父節(jié)點
var parent = ele.parentNode;
var parent = ele.parentElement;//非標準

// 獲取子節(jié)點，子節(jié)點可以是任何一種節(jié)點，可以通過nodeType來判斷
var nodes = ele.children;//元素節(jié)點
var nodes = ele.childNodes; //所有節(jié)點，包括文本，元素等。可配合nodeType == 1得到元素節(jié)點

// 當前元素的第一個/最后一個子元素節(jié)點
ele.firstElementChild;//第一個元素節(jié)點
ele.firstChild    //第一個節(jié)點，一般是文本節(jié)點
ele.lastElementChild;//最后一個元素節(jié)點
ele.lastChild//最后一個節(jié)點

// 下一個/上一個兄弟節(jié)點
var el = ele.nextElementSibling;//元素節(jié)點
var el = ele.nextSibling;//包括文本節(jié)點
var el = ele.previousElementSibling;
var el = ele.previousSibling;

append,replace,insertBefor的參數el如果已存在DOM中，都會先移除，再插入到新位置。
刪除一個元素自身

myElement.parentNode.removeChild(myElement)

// 添加、刪除子元素.多次appendChild到一個父節(jié)點會引起瀏覽器多次重新渲染，此時可以將節(jié)點組合到fragment = document.createDocumentFragment()中。
ele.appendChild(el);//避免鏈式操作
ele.removeChild(el);//如果有返回值，則存在內存中。

// 替換子元素
//newChild如果存在dom中，則會被移除。replaceNode 為oldChild
replaceNode = parentNode.replaceChild(newChild, oldChild);

// 插入子元素
//newElement如果存在dom中，會先被移除再插入（不想移除可先復制）。
//referenceElement必須有，可為null，為null時，插入到parentElement最后
//return新增加的node（fragment不返回）
newElement = parentElement.insertBefore(newElement, referenceElement);
//沒有insertAfter
parentElement.insertBefore(newElement,referenceElement.nextSibling)
//prepend，使用insertBefore代替。
ParentNode.prepend(nodesToPrepend); //IE支持不好
parentElement.insertBefore(newElement, theFirstChild);//jquery中prepend()也是用此方法


//克隆節(jié)點
//node需要被克隆的node
//deep為ture，則克隆所有子節(jié)點。deep不要省略，因為各版本瀏覽器默認值不同。
//深度克隆會克隆所有屬性（除addEventListener和后續(xù)添加的click事件如：node.onclick = fn，但是會克隆寫在dom中的onclick事件），容易導致id重復的問題。
var dupNode = node.cloneNode([deep]);
//document和iframe之間的克隆
var node = document.importNode(externalNode, deep);

.getAttibute(), .setAttribute()和.removeAttribute()這三個方法。這些方法直接修改的是元素的HTML屬性（與DOM屬性相對），因此會使瀏覽器重新渲染。瀏覽器重新渲染不僅比只是設置DOM屬性代價更高，而且還會產生不期望的后果。作為一個小原則，除非你真的想對HTML“持久化”那些改變，你就只用上面的方法修改與DOM屬性不相關的HTML屬性（比如colspan）

// 獲取一個{name, value}的數組
var attrs = el.attributes;

// 獲取、設置屬性
var c = el.getAttribute("class");
el.setAttribute("class", "highlight");

// 判斷、移除屬性
el.hasAttribute("class");
el.removeAttribute("class");

// 是否有屬性設置
el.hasAttributes();  

// Get an attribute value
const value = myElement.value

// Set an attribute as an element property
myElement.value = "foo"

// Set multiple properties using Object.assign()
Object.assign(myElement, {
  value: "foo",
  id: "bar"
})

// Remove an attribute
myElement.value = null

className和classList

myElement.classList.add("foo")
myElement.classList.remove("bar")
myElement.classList.toggle("baz")

el.className += " class"

在JavaScript里要寫成駝峰形式.如果我們想獲得CSS規(guī)則的值，我們可以通過.style屬性。然而，通過它只能拿到我們明確設置過的樣式。想拿到計算后的樣式值，我們可以用.window.getComputedStyle()。它可以拿到這個元素并返回一個CSSStyleDeclaration。這個返回值包括了這個元素自己的和繼承自父元素的全部樣式。

myElement.style.marginLeft = "2em"
window.getComputedStyle(myElement).getPropertyValue("margin-left")
// 動態(tài)添加樣式規(guī)則
var style = document.createElement("style");
style.innerHTML = "body{color:red} #top:hover{background-color: red;color: white;}";
document.head.appendChild(style);

innerHTML與outerHTML的區(qū)別？

DOM元素的innerHTML, outerHTML, innerText, outerText屬性的區(qū)別也經常被面試官問到， 比如對于這樣一個HTML元素：

    我是測試文本

let el = document.querySelector("#main");
console.log("el.innerHTML: ",el.innerHTML); //我是測試文本

console.log("el.outerHTML: ",el.outerHTML); //
我是測試文本

console.log("el.innerText: ",el.innerText); //我是測試文本
console.log("el.outerText: ",el.outerText); //我是測試文本
/* el.innerText = "哈哈"; */
el.outerText = "哈哈";  

innerHTML：內部HTML；

outerHTML：外部HTML；

innerText：內部文本；

outerText：內部文本；

上述四個屬性不僅可以讀取，還可以賦值。outerText和innerText的區(qū)別在于outerText賦值時會把標簽一起賦值掉，另外xxText賦值時HTML特殊字符會被轉義。

https://jsfiddle.net/langlang...

jQuery的html()與innerHTML的區(qū)別？

jQuery的.html()會調用.innerHTML來操作，但同時也會catch異常，然后用.empty(), .append()來重新操作。 這是因為IE8中有些元素的.innerHTML是只讀的。見：http://stackoverflow.com/ques...

NodeList 和 HTMLCollection區(qū)別。
NodeList是節(jié)點集合，包括任何節(jié)點類型。HTMLCollection是元素集合。NodeList有.forEach（），但IE不支持，所以一般轉換成數組再調用

//[Arry.from()][5]
Array.from(myElements).forEach(doSth);
Array.protoType.forEach.call(myElements,doSth);
[].forEach.call(myElements,doSth)

參考文章：

No JQuery! 原生 JavaScript 操作 DOM

HTML屬性與DOM屬性的區(qū)別？