1. 什么是DOM
DOM 全稱是 Document Object Model，也就是文檔對象模型。
DOM 就是針對 HTML 和 XML 提供的一個API。它提供了對文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對該結(jié)構(gòu)進行訪問，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容。
我們可以把一個HTML 看做一個對象樹（DOM樹），它本身和里面的所有東西比如 <div></div> 這些標簽都看做一個對象，每個對象都叫做一個節(jié)點（node），節(jié)點可以理解為 DOM 中所有 Object 的父類。
2. DOM 有什么用
簡單來說，通過 DOM 操作HTML元素，你可以改變網(wǎng)頁。比如我們現(xiàn)在要更改網(wǎng)頁標題，可以直接鍵入代碼：
document.title = 'How to learn javascript'
這個 API 使得在網(wǎng)頁被下載到瀏覽器之后改變網(wǎng)頁的內(nèi)容成為可能。
- 你可以使用 Javascript 語言來操作 DOM 以改變網(wǎng)頁。
- 為了改變網(wǎng)頁，你必須告訴 Javascript 改變哪一個節(jié)點。這就是操作 DOM。
- 改變網(wǎng)頁，實際就是操作DOM對節(jié)點進行增刪改查。
3. DOM元素的增刪改查
3.1 添加元素
- Document.createElement() // 創(chuàng)建元素
語法：
let element = document.createElement(tagName[, options]) - Document.createTextNode() // 創(chuàng)建一個新的文本節(jié)點
語法：
var text = document.createTextNode() - Document.createAttribute() // 創(chuàng)建并返回一個新的屬性節(jié)點
語法：
attribute = document.createAttribute(name) - Document.createComment() // 創(chuàng)建并返回一個注釋節(jié)點
語法：
var commentNode = document.createComment(data) - Document.createDocumentFragment() // 創(chuàng)建一個新的空的文檔片段
語法：
var docFragment = document.createDocumentFragment() - Node.appendChild() // 將一個節(jié)點添加到指定父節(jié)點的子節(jié)點列表末尾
語法：
var child = node.appendChild(child) - Element.classList.add() // 添加指定的類值class
語法：
elementNodeReference.classList.add( String [, String] ) - Document.write()
Document.writeIn() // 將文本字符串寫入打開的文檔流
語法：
document.write(markup)
document.writeIn(line)
document.write()和writeIn()的區(qū)別是前者沒有換行，而后者有換行。
3.2 刪除元素
- Element.removeAttribute() // 從元素中刪除指定的屬性
語法：
element.removeAttribute(attrName) - Element.removeChild(）// 刪除子元素
語法：
var oldChild = node.removeChild(child);
OR
element.removeChild(child); - ChildNode.remove() // 刪除元素
語法：
elementNodeReference.remove() - Child.parentNode.removeChild(child) // 不確定父元素時可這樣刪除子元素
示例：
if (node.parentNode) {
//判斷node是否在DOM樹中
node.parentNode.removeChild(node);
} - Element.classList.remove() // 移除元素中一個或多個類名
語法：
elementNodeReference.classList.remove( String [,String] )
3.3 修改元素
Node.innerText // 修改元素文本內(nèi)容
語法：
Node.innerHTML =new contentElement.innerHTML // 設(shè)置或獲取描述元素后代的HTML語句
語法：
const content = element.innerHTML;
// 返回時，內(nèi)容包含描述所有元素后代的序列化HTML代碼。
element.innerHTML = markup;
// 除所有元素的子節(jié)點，解析內(nèi)容字符串，并將生成的節(jié)點分配給元素的子元素。node.cloneNode() // 拷貝元素(包括所有屬性和值)
語法及示例：
var dupNode = node.cloneNode(deep)
<body>
<ul id="myList1">
<li>iPhone</li>
<li>iPad</li>
</ul>
<ul id="myList2">
<li>Macbook</li>
<li>appleMusic</li >
</ul>
<button onclick="myFunction()">復制</button>
<script>
function myFunction(){
var itm=document.getElementById("myList2").lastChild;
var cln=itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
</script>
</body>
Element.setAttribute() // 設(shè)置或者改變指定屬性并指定值
語法：
element.setAttribute(name, value)style.property = new style // 修改元素CSS屬性值
示例：
var title= document.querySelector("h1")
title.style.backgroundColor = red // h1背景色改為紅色Node.replaceChild() // 替換子節(jié)點
語法及示例：
replacedNode = parentNode.replaceChild(newChild, oldChild)
<body>
<ul id="myList">
<li>iPhone</li>
<li>iPod</li>
<li>Macbook</li>
</ul>
<button onclick="myFunction()">替換</button>
<script>
function myFunction(){
var textnode=document.createTextNode("Surface pro");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
</script>
3.4 查找元素
- attribute.getAttribute() // 返回元素的指定屬性值
語法：
let attribute = element.getAttribute(attributeName) - Document.getElementsByClassName() // 返回一個節(jié)點列表（數(shù)組），包含了所有擁有指定 class 的子元素
語法：
var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names); - Document.getElementsByName() // 返回帶有指定名稱的對象集合
語法：
elements = document.getElementsByName(name) - Document.getElementsByTagName() // 返回帶有指定標簽名的對象集合
語法：
var elements = document.getElementsByTagName(name) - Document.getElementById() // 返回對擁有指定 id 的第一個對象的引用
語法：
element = document.getElementById(id) - Document.querySelector() // 返回文檔中匹配指定的CSS選擇器的第一元素
語法及示例：
element = document.querySelector(selectors) // 語法
//example
document.querySelector("#demo") // 獲取文檔中ID為demo的元素 - Document.querySelectorAll() // 返回與指定的選擇器組匹配的文檔中的元素列表
語法：
elementList = document.querySelectorAll(selectors)
4. 總結(jié)
上述具體說明了Javascript中利用文檔對象模型（DOM）來對HTML或XML的增刪改查；在利用原生的DOM操作文檔時，常常會很復雜。在實際使用中還是推薦使用第三方庫，例如jQuery來對文檔進行操作。但是，熟練DOM也是掌握Javascript的基本要求，希望總結(jié)出的內(nèi)容對大家有所幫助 _。
