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

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

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

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

Document：整個文檔樹的頂層節(jié)點

DocumentType：doctype標簽（比如）

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

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

Text：標簽之間或標簽包含的文本

Comment：注釋

DocumentFragment：文檔的片段

在這里簡單介紹，元素Element的構成：標簽tag，文本content，屬性Attribute

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

所有屬性見Document 節(jié)點

每個載入瀏覽器的HTML文檔都會成為document對象。只要瀏覽器開始載入 HTML 文檔，該對象就存在了，可以直接使用。
document對象包含了文檔的基本信息，我們可以通過JavaScript對HTML頁面中的所有元素進行訪問、修改。

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

以下為常用屬性

//

//"UTF-8"

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

...]

location屬性返回一個只讀對象，返回的是當前文檔的URL信息

9.2 document.location的應用

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

// 在控制臺輸入該語句，會直接跳轉(zhuǎn)到另一個網(wǎng)址

document.location.reload(true)

// 當前頁面會重新加載，而且優(yōu)先從服務器重新加載

document.location.reload(false)

// 當前頁面會重新加載，而且優(yōu)先從本地緩存重新加載（默認值）

document.location.toString()

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

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

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

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

我們的頁面渲染的時候就會去打開一個文檔流，當渲染繪制結束，就關閉這個文檔流。
關閉后，如果重新調(diào)用document.write()就會重新去打開一個新的文檔流，并寫入數(shù)據(jù)

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

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

var elem = document.getElementById("test")

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

我們可以通過下標的方式去訪問它，getElementsByClassName("center")[0]

返回所有指定標簽的元素

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

選擇擁有name屬性的HTML元素，返回一個NodeList格式的對象，不會實時反映元素的變化

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

像css一樣選擇元素（id用#，class用. ），只會選擇一個元素，選擇第一個元素。

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

elementList = document.querySelectorAll(selectors)

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

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

var newDiv = document.createElement("div")

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

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

var docFragment = document.createDocumentFragment();

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

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

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)有兩個參數(shù)：要插入的元素和要替換的元素
舉個例子，源代碼

當我們用第一個元素去替換最后一個元素之后

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

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

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，輸入的字符串會當成文本展示

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

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

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

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

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

操作dom元素的style屬性

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

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

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

注意getComputedStyle是只讀的屬性，不能通過該屬性來設置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

舉個栗子

  
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")} 

結果展示