摘要：它實(shí)際上等于清除當(dāng)前文檔流，重新寫(xiě)入內(nèi)容方法用于關(guān)閉方法所新建的文檔。如果頁(yè)面已經(jīng)渲染完成關(guān)閉了，再調(diào)用方法，它會(huì)先調(diào)用方法，擦除當(dāng)前文檔所有內(nèi)容，然后再寫(xiě)入我們的頁(yè)面渲染的時(shí)候就會(huì)去打開(kāi)一個(gè)文檔流，當(dāng)渲染繪制結(jié)束，就關(guān)閉這個(gè)文檔流。

DOM 是 JavaScript 操作網(wǎng)頁(yè)的接口，全稱為“文檔對(duì)象模型”（Document Object Model）。

它的作用是將網(wǎng)頁(yè)轉(zhuǎn)為一個(gè) JavaScript 對(duì)象，從而可以用腳本進(jìn)行各種操作（比如增刪內(nèi)容）。
瀏覽器會(huì)根據(jù) DOM 模型，將結(jié)構(gòu)化文檔（比如 HTML 和 XML）解析成一系列的節(jié)點(diǎn)，再由這些節(jié)點(diǎn)組成一個(gè)樹(shù)狀結(jié)構(gòu)（DOM Tree）。所有的節(jié)點(diǎn)和最終的樹(shù)狀結(jié)構(gòu)，都有規(guī)范的對(duì)外接口。

DOM 的最小組成單位叫做節(jié)點(diǎn)（node）。文檔的樹(shù)形結(jié)構(gòu)（DOM 樹(shù)），就是由各種不同類型的節(jié)點(diǎn)組成。
節(jié)點(diǎn)的類型有七種。

Document：整個(gè)文檔樹(shù)的頂層節(jié)點(diǎn)

DocumentType：doctype標(biāo)簽（比如）

Element：網(wǎng)頁(yè)的各種HTML元素（比如）

Attribute：網(wǎng)頁(yè)元素的屬性（比如class="right"）

Text：標(biāo)簽之間或標(biāo)簽包含的文本

Comment：注釋

DocumentFragment：文檔的片段

在這里簡(jiǎn)單介紹，元素Element的構(gòu)成：標(biāo)簽tag，文本content，屬性Attribute

所有節(jié)點(diǎn)形成的樹(shù)狀結(jié)構(gòu)就是 DOM 樹(shù)
瀏覽器原生提供document節(jié)點(diǎn)，document節(jié)點(diǎn)代表整個(gè)文檔。
文檔的第一層只有一個(gè)節(jié)點(diǎn)，就是 HTML 網(wǎng)頁(yè)的第一個(gè)標(biāo)簽，它構(gòu)成了樹(shù)結(jié)構(gòu)的根節(jié)點(diǎn)（root node），其他 HTML 標(biāo)簽節(jié)點(diǎn)都是它的下級(jí)節(jié)點(diǎn)

所有屬性見(jiàn)Document 節(jié)點(diǎn)

每個(gè)載入瀏覽器的HTML文檔都會(huì)成為document對(duì)象。只要瀏覽器開(kāi)始載入 HTML 文檔，該對(duì)象就存在了，可以直接使用。
document對(duì)象包含了文檔的基本信息，我們可以通過(guò)JavaScript對(duì)HTML頁(yè)面中的所有元素進(jìn)行訪問(wèn)、修改。

document對(duì)象有很多屬性來(lái)描述文檔信息，在console臺(tái)里面輸出document.就會(huì)出現(xiàn)document全部的屬性。

以下為常用屬性

//

//"UTF-8"

返回當(dāng)前文檔的狀態(tài)，共有三種可能的值
1）. loading：加載HTML代碼階段，尚未完成解析
2）. interactive：加載外部資源階段
3）. complete：全部加載完成
演示一下，在html放入一章圖片，調(diào)卡網(wǎng)絡(luò)，刷新網(wǎng)頁(yè)查看readystate的狀態(tài)

...]

location屬性返回一個(gè)只讀對(duì)象，返回的是當(dāng)前文檔的URL信息

9.2 document.location的應(yīng)用

document.location.assign("http://www.baidu.com")

// 在控制臺(tái)輸入該語(yǔ)句，會(huì)直接跳轉(zhuǎn)到另一個(gè)網(wǎng)址

document.location.reload(true)

// 當(dāng)前頁(yè)面會(huì)重新加載，而且優(yōu)先從服務(wù)器重新加載

document.location.reload(false)

// 當(dāng)前頁(yè)面會(huì)重新加載，而且優(yōu)先從本地緩存重新加載（默認(rèn)值）

document.location.toString()

// 將location對(duì)象轉(zhuǎn)為字符串，等價(jià)于document.location.href

document.open方法用于新建一個(gè)文檔，供write方法寫(xiě)入內(nèi)容。它實(shí)際上等于清除當(dāng)前文檔流，重新寫(xiě)入內(nèi)容

document.close方法用于關(guān)閉open方法所新建的文檔。一旦關(guān)閉，write方法就無(wú)法寫(xiě)入內(nèi)容了。

document.write方法用于向當(dāng)前文檔寫(xiě)入內(nèi)容。
只要當(dāng)前文檔還沒(méi)有用close方法關(guān)閉，它所寫(xiě)入的內(nèi)容就會(huì)追加在已有內(nèi)容的后面。
如果頁(yè)面已經(jīng)渲染完成關(guān)閉了，再調(diào)用write方法，它會(huì)先調(diào)用open方法，擦除當(dāng)前文檔所有內(nèi)容，然后再寫(xiě)入

我們的頁(yè)面渲染的時(shí)候就會(huì)去打開(kāi)一個(gè)文檔流，當(dāng)渲染繪制結(jié)束，就關(guān)閉這個(gè)文檔流。
關(guān)閉后，如果重新調(diào)用document.write()就會(huì)重新去打開(kāi)一個(gè)新的文檔流，并寫(xiě)入數(shù)據(jù)

dom的操作，分為兩步：1是選擇它，2是操作它

返回匹配ID屬性的元素節(jié)點(diǎn)，如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null

var elem = document.getElementById("test")

返回一個(gè)類似數(shù)組的對(duì)象(HTMLCollection)，包括了所有class名字符合指定條件的元素

我們可以通過(guò)下標(biāo)的方式去訪問(wèn)它，getElementsByClassName("center")[0]

返回所有指定標(biāo)簽的元素

var paras = document.getElementsByTagName("p");

選擇擁有name屬性的HTML元素，返回一個(gè)NodeList格式的對(duì)象，不會(huì)實(shí)時(shí)反映元素的變化

var forms = document.getElementsByName("x");

像css一樣選擇元素（id用#，class用. ），只會(huì)選擇一個(gè)元素，選擇第一個(gè)元素。

和querySelector()類似，不過(guò)querySelectorAll()返回的是滿足條件的所有元素，也就是一個(gè)NodeList類型的對(duì)象

elementList = document.querySelectorAll(selectors)

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

參數(shù)為元素的標(biāo)簽名，即元素節(jié)點(diǎn)的tagName屬性。
創(chuàng)建了一個(gè)元素，創(chuàng)建的這個(gè)元素在虛擬的dom里面，只有把這個(gè)虛擬的dom放在頁(yè)面，用戶才能看得見(jiàn)

var newDiv = document.createElement("div")

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

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

var docFragment = document.createDocumentFragment();

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

剛才的代碼會(huì)引起五次重新渲染，我們生成一個(gè)內(nèi)存片段，一次就搞定了,而且節(jié)省了一個(gè)標(biāo)簽

var contain= document.querySelector(".classbar")
var fragment=document.createDocumentFragment()
for(var i=0;i<5;i++){
  var content =document.createElement("li")
  var text=document.createTextNode(i)
  content.appendChild(text)
 fragment.appendChild(content)
}
 contain.appendChild(fragment)

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

var newdiv= document.createElement("div")
var newcontent= document.createTextNode("hhhhhhhh")
newdiv.insertBefore(newcontent,newdiv.firstChild)

newDiv.replaceChild(newElement, oldElement)有兩個(gè)參數(shù)：要插入的元素和要替換的元素
舉個(gè)例子，源代碼

當(dāng)我們用第一個(gè)元素去替換最后一個(gè)元素之后

 var date =document.createElement("p")
 var text=document.createTextNode("ffff")
 date.appendChild(text)
 contain.appendChild(date)
 contain.removeChild(date)

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

varnode.cloneNode(true)

node.getAttribute("id");

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

var node = document.getElementById("div1");
node.setAttribute("id", "newVal");//屬性名 ，屬性值

node.removeAttribute("id");

選擇元素，使用innertext，輸入的字符串會(huì)當(dāng)成文本展示

document.querySelector(".classbar").innerText="
123456
"

選擇元素，使用innerHtml，輸入的字符串會(huì)當(dāng)成html語(yǔ)句執(zhí)行后展示

document.querySelector(".classbar").innerHTML="
123456
"

使用時(shí)要注意安全的問(wèn)題，innerHTML內(nèi)容不能由用戶輸入

可修改元素的 style 屬性，修改結(jié)果直接反映到頁(yè)面元素
選中這個(gè)元素，使用style對(duì)象，就會(huì)出現(xiàn)該元素所有的css屬性

操作dom元素的style屬性

document.querySelector("p").style.color = "red"
document.querySelector(".box").style.backgroundColor = "#ccc"

通過(guò) node.style.屬性 不能直接獲取dom對(duì)象的style的值，必須使用getComputedStyle獲取元素計(jì)算后的樣式

getComputedStyle是widow全局變量，
通過(guò)getComputedStyle(document.querySelector(".center"))可以獲取(".center")這個(gè)dom元素所有的css屬性值。
然后通過(guò)下標(biāo)或者.來(lái)獲取具體的屬性值，注意可以用駝峰寫(xiě)法，來(lái)代替—連接字符。

注意getComputedStyle是只讀的屬性，不能通過(guò)該屬性來(lái)設(shè)置css屬性

var nodeBox = document.querySelector(".box")
nodeBox.classList.add("active")   //新增 class
nodeBox.classList.remove("active")  //刪除 class
nodeBox.classList.toggle("active")   //新增/刪除切換
node.classList.contains("active")   // 判斷是否擁有 class

舉個(gè)栗子

  
hello
  
jirengu

   add
   remove
   toggle1
   toggle2

var toggle1btn=document.querySelector("#toggle1")
var toggle2btn=document.querySelector("#toggle2")
var addbtn=document.querySelector("#add")
var removebtn=document.querySelector("#remove")
var boxpanel=document.querySelector(".box")

addbtn.onclick=function(){boxpanel.classList.add("active")}

removebtn.onclick=function(){boxpanel.classList.remove("active")}

toggle1btn.onclick=function(){
  if(boxpanel.classList.contains("active")){
  boxpanel.classList.remove("active")  
  }else{
    boxpanel.classList.add("active") 
  }
}

toggle2btn.onclick=function(){
  boxpanel.classList.toggle("active")} 

結(jié)果展示