1. 什么是DOM
DOM 全稱是 Document Object Model缴挖，也就是文檔對(duì)象模型菲茬。
DOM 就是針對(duì) HTML 和 XML 提供的一個(gè)API。它提供了對(duì)文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對(duì)該結(jié)構(gòu)進(jìn)行訪問棚亩，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容虏杰。
我們可以把一個(gè)HTML 看做一個(gè)對(duì)象樹（DOM樹）讥蟆，它本身和里面的所有東西比如 <div></div> 這些標(biāo)簽都看做一個(gè)對(duì)象，每個(gè)對(duì)象都叫做一個(gè)節(jié)點(diǎn)（node）纺阔，節(jié)點(diǎn)可以理解為 DOM 中所有 Object 的父類瘸彤。
2. DOM 有什么用
簡單來說，通過 DOM 操作HTML元素笛钝，你可以改變網(wǎng)頁质况。比如我們現(xiàn)在要更改網(wǎng)頁標(biāo)題，可以直接鍵入代碼：
document.title = 'How to learn javascript'
這個(gè) API 使得在網(wǎng)頁被下載到瀏覽器之后改變網(wǎng)頁的內(nèi)容成為可能玻靡。
- 你可以使用 Javascript 語言來操作 DOM 以改變網(wǎng)頁结榄。
- 為了改變網(wǎng)頁，你必須告訴 Javascript 改變哪一個(gè)節(jié)點(diǎn)囤捻。這就是操作 DOM臼朗。
- 改變網(wǎng)頁，實(shí)際就是操作DOM對(duì)節(jié)點(diǎn)進(jìn)行增刪改查。
3. DOM元素的增刪改查
3.1 添加元素
- Document.createElement() // 創(chuàng)建元素
語法：
let element = document.createElement(tagName[, options]) - Document.createTextNode() // 創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)
語法：
var text = document.createTextNode() - Document.createAttribute() // 創(chuàng)建并返回一個(gè)新的屬性節(jié)點(diǎn)
語法：
attribute = document.createAttribute(name) - Document.createComment() // 創(chuàng)建并返回一個(gè)注釋節(jié)點(diǎn)
語法：
var commentNode = document.createComment(data) - Document.createDocumentFragment() // 創(chuàng)建一個(gè)新的空的文檔片段
語法：
var docFragment = document.createDocumentFragment() - Node.appendChild() // 將一個(gè)節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾
語法：
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) // 不確定父元素時(shí)可這樣刪除子元素
示例：
if (node.parentNode) {
//判斷node是否在DOM樹中
node.parentNode.removeChild(node);
} - Element.classList.remove() // 移除元素中一個(gè)或多個(gè)類名
語法：
elementNodeReference.classList.remove( String [,String] )
3.3 修改元素
Node.innerText // 修改元素文本內(nèi)容
語法：
Node.innerHTML =new contentElement.innerHTML // 設(shè)置或獲取描述元素后代的HTML語句
語法：
const content = element.innerHTML;
// 返回時(shí)，內(nèi)容包含描述所有元素后代的序列化HTML代碼挡毅。
element.innerHTML = markup;
// 除所有元素的子節(jié)點(diǎn)蒜撮，解析內(nèi)容字符串，并將生成的節(jié)點(diǎn)分配給元素的子元素跪呈。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()">復(fù)制</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é)點(diǎn)
語法及示例：
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() // 返回一個(gè)節(jié)點(diǎn)列表（數(shù)組）段磨，包含了所有擁有指定 class 的子元素
語法：
var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names); - Document.getElementsByName() // 返回帶有指定名稱的對(duì)象集合
語法：
elements = document.getElementsByName(name) - Document.getElementsByTagName() // 返回帶有指定標(biāo)簽名的對(duì)象集合
語法：
var elements = document.getElementsByTagName(name) - Document.getElementById() // 返回對(duì)擁有指定 id 的第一個(gè)對(duì)象的引用
語法：
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中利用文檔對(duì)象模型（DOM）來對(duì)HTML或XML的增刪改查；在利用原生的DOM操作文檔時(shí)耗绿，常常會(huì)很復(fù)雜薇溃。在實(shí)際使用中還是推薦使用第三方庫，例如jQuery來對(duì)文檔進(jìn)行操作缭乘。但是沐序，熟練DOM也是掌握J(rèn)avascript的基本要求，希望總結(jié)出的內(nèi)容對(duì)大家有所幫助 _堕绩。
