摘要：它实际上等于清除当前文档流，重新写入内容方法用于关闭方法所新建的文档。如果页面已经渲染完成关闭了，再调用方法，它会先调用方法，擦除当前文档所有内容，然后再写入我们的页面渲染的时候就会去打开一个文档流，当渲染绘制结束，就关闭这个文档流。

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。

它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。
节点的类型有七种。

Document：整个文档树的顶层节点

DocumentType：doctype标签（比如）

Element：网页的各种HTML元素（比如）

Attribute：网页元素的属性（比如class="right"）

Text：标签之间或标签包含的文本

Comment：注释

DocumentFragment：文档的片段

在这里简单介绍，元素Element的构成：标签tag，文本content，属性Attribute

所有节点形成的树状结构就是 DOM 树
浏览器原生提供document节点，document节点代表整个文档。
文档的第一层只有一个节点，就是 HTML 网页的第一个标签，它构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点

所有属性见Document 节点

每个载入浏览器的HTML文档都会成为document对象。只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。
document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。

document对象有很多属性来描述文档信息，在console台里面输出document.就会出现document全部的属性。

以下为常用属性

//

//"UTF-8"

返回当前文档的状态，共有三种可能的值
1）. loading：加载HTML代码阶段，尚未完成解析
2）. interactive：加载外部资源阶段
3）. complete：全部加载完成
演示一下，在html放入一章图片，调卡网络，刷新网页查看readystate的状态

...]

location属性返回一个只读对象，返回的是当前文档的URL信息

9.2 document.location的应用

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

// 在控制台输入该语句，会直接跳转到另一个网址

document.location.reload(true)

// 当前页面会重新加载，而且优先从服务器重新加载

document.location.reload(false)

// 当前页面会重新加载，而且优先从本地缓存重新加载（默认值）

document.location.toString()

// 将location对象转为字符串，等价于document.location.href

document.open方法用于新建一个文档，供write方法写入内容。它实际上等于清除当前文档流，重新写入内容

document.close方法用于关闭open方法所新建的文档。一旦关闭，write方法就无法写入内容了。

document.write方法用于向当前文档写入内容。
只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。
如果页面已经渲染完成关闭了，再调用write方法，它会先调用open方法，擦除当前文档所有内容，然后再写入

我们的页面渲染的时候就会去打开一个文档流，当渲染绘制结束，就关闭这个文档流。
关闭后，如果重新调用document.write()就会重新去打开一个新的文档流，并写入数据

dom的操作，分为两步：1是选择它，2是操作它

返回匹配ID属性的元素节点，如果没有发现匹配的节点，则返回null

var elem = document.getElementById("test")

返回一个类似数组的对象(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方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素

参数为元素的标签名，即元素节点的tagName属性。
创建了一个元素，创建的这个元素在虚拟的dom里面，只有把这个虚拟的dom放在页面，用户才能看得见

var newDiv = document.createElement("div")

用来生成文本节点，参数为所要生成的文本节点的内容

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

var docFragment = document.createDocumentFragment();

DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。
这样做的好处：因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。
举个例子解释

刚才的代码会引起五次重新渲染，我们生成一个内存片段，一次就搞定了,而且节省了一个标签

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)有两个参数：要插入的元素和要替换的元素
举个例子，源代码

当我们用第一个元素去替换最后一个元素之后

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

cloneNode()方法用于克隆元素，方法有一个布尔值参数，传入true的时候会深复制，也就是会复制元素及其子元素（IE还会复制其事件），false的时候只复制元素本身

varnode.cloneNode(true)

node.getAttribute("id");

attribute = document.createAttribute(name);
//createAttribute方法的参数name，是属性的名称，比如id。

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

node.removeAttribute("id");

选择元素，使用innertext，输入的字符串会当成文本展示

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

选择元素，使用innerHtml，输入的字符串会当成html语句执行后展示

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

使用时要注意安全的问题，innerHTML内容不能由用户输入

可修改元素的 style 属性，修改结果直接反映到页面元素
选中这个元素，使用style对象，就会出现该元素所有的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")} 

结果展示