首先党窜，我們知道DOM是什么拗引？DOM（文檔對象模型）是針對HTML和XML文檔的一個(gè)API, 描述的是一個(gè)層次化的節(jié)點(diǎn)樹。

一.節(jié)點(diǎn)層次

我們來深進(jìn)一步理解一下為什么是樹結(jié)構(gòu) 幌衣？每個(gè)節(jié)點(diǎn)都有自己的特點(diǎn)矾削，數(shù)據(jù)和方法，它也會(huì)和其他的節(jié)點(diǎn)存在同級或者嵌套的關(guān)系豁护，形成層級哼凯，而文檔節(jié)點(diǎn)是每個(gè)文檔根節(jié)點(diǎn)。最終形成樹結(jié)構(gòu)楚里。下面我們就具體看看節(jié)點(diǎn)的類型：

1.Node類型

在javaScript中所有節(jié)點(diǎn)類型都繼承自于Node類型断部，而節(jié)點(diǎn)類型一共有十二種，在Node類型用下面的12個(gè)常量表示

Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE(2)
Node.TEXT_NODE(3)
Node.CDATA_SECTION_NODE(4)
Node.ENTITY_REFERENCE_NODE(5)
Node.ENTITY_NODE(6)
Node.PROCESSING_INSTRUCTION_NODE(7)
Node.COMMENT_NODE(8)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
Node.DOCUMENT_FRAGMENT_NODE(11)
Node.NOTATION_NODE(12)

每個(gè)節(jié)點(diǎn)都有一個(gè)nodeType屬性班缎，它用來表示該節(jié)點(diǎn)的類型

//ie無效蝴光，ie沒有公開Node類型的構(gòu)造函數(shù)
if(someNode.nodeType == Node.ELEMENT_NODE){
  alter("Node is an element")
}
//解決瀏覽器兼容   與數(shù)字比較 
// 類如元素節(jié)點(diǎn)
if(someNode.nodeType == 1){
  alter("Node is an element")
}

1.nodeName 和nodeValue屬性
這兩個(gè)屬性了解節(jié)點(diǎn)的具體信息。但是在使用這兩個(gè)屬性之前最好檢測一下節(jié)點(diǎn)類型达址。
對于我們常用的元素節(jié)點(diǎn) 它的 nodeNme 就是元素的標(biāo)簽名蔑祟，nodeValue 始終為 null
2.節(jié)點(diǎn)關(guān)系

每個(gè)節(jié)點(diǎn)都有一個(gè)childNodes屬性，它保存著NodeList對象沉唠，NodeList是一個(gè)類數(shù)組做瞪，有l(wèi)ength屬性。但是不是Array實(shí)例右冻。類數(shù)組的每一項(xiàng)可以通過方括號或者item(index)方法
每個(gè)節(jié)點(diǎn)都有一個(gè)parentNode屬性装蓬。該屬性執(zhí)行文檔樹中的父節(jié)點(diǎn)。
childNodes 列表里邊的節(jié)點(diǎn)互為同胞節(jié)點(diǎn)纱扭。同胞節(jié)點(diǎn) 之間常用屬性： previousSibilng和 nextSibling
父節(jié)點(diǎn)與子節(jié)點(diǎn)的常用屬性： firstChild 和 nextChild
3.操作節(jié)點(diǎn)
appendChild():用于向childNode列表添加節(jié)點(diǎn)

var appendNode = someNode.appendChild(newNode)

insertBefore() :向指定位置插入節(jié)點(diǎn)

//接受兩個(gè)參數(shù) 參數(shù)1 ：要插入的節(jié)點(diǎn)牍帚，參數(shù)2 ：最為參照的節(jié)點(diǎn)
//1 .插入成為最后一個(gè)節(jié)點(diǎn)
var appendNode1 = someNode. insertBefore(newNode,null)
//2.插入成為第一個(gè)節(jié)點(diǎn)
var appendNode1 = someNode. insertBefore(newNode,someNode.firstChild)
//1 .插入最后一個(gè)節(jié)點(diǎn)前面
var appendNode1 = someNode. insertBefore(newNode,someNode.lastChild)

replaceChild(): 替換某個(gè)節(jié)點(diǎn)

//接受兩個(gè)參數(shù) 參數(shù)1 ：替換的節(jié)點(diǎn)，參數(shù)2 ：被替換的節(jié)點(diǎn)
var replaceNode1 = someNode. replaceChild(newNode,someNode.firstChild)
var replaceNode1 = someNode.replaceChild(newNode,someNode.lastChild)

removeChild() : 移除某個(gè)節(jié)點(diǎn)

var removedNode = someNode.appendChild(someNode.lastChild)

cloneNode() : 復(fù)制某個(gè)節(jié)點(diǎn) 接受一個(gè)布爾參數(shù) true 表示深復(fù)制（復(fù)制該子節(jié)點(diǎn)以及子節(jié)點(diǎn)樹）乳蛾，false 表示淺復(fù)制（只復(fù)制該節(jié)點(diǎn)）

var copyNode = myList.cloneNode(true)
alter(copyNode.childNode.length)

2.Document類型

Document 表示文檔類型暗赶，我們常用的 document 對象是HTMLDocument的一個(gè)實(shí)例
Document 節(jié)點(diǎn)的特性：

nodeType的值為9
nodeName的值為 “#document”
nodeValue的值為null
parentNode的值為null
ownerDocument 值為null
其子節(jié)點(diǎn)可能是一個(gè)DocumentType(最多一個(gè))鄙币、Element(最多一個(gè))、ProcessingInstruction或Comment
1.文檔子節(jié)點(diǎn)
兩種方式：
documentElement屬性蹂随，該屬性始終指向HTML頁面中的<html>
childNodes
document對象還有一個(gè)body對象十嘿，直接指向<body>元素
2.文檔信息
document對象用來表示網(wǎng)頁的信息的一些特有屬性：
title ：<title>元素中的文本，顯示在瀏覽器窗口的標(biāo)題欄
url : 包含完整的地址欄url
domain ：頁面的域名
referrer ：保存鏈接到當(dāng)前頁面的那個(gè)也買你的url

var  title = document.title
var  url = document.URL
var  domain = document.domain
var referrer = document.referrer

3.查找元素

<div id = "ID" class = "name" name = "name"><div>

var div = document.getElementById("ID")
//根據(jù)節(jié)點(diǎn)的name屬性的值獲取節(jié)點(diǎn)列表   HTMLDocument類型特有方
var div1 = document.getElementsByName("name")
//根據(jù)標(biāo)簽名獲取節(jié)點(diǎn)列表   HTMLCollection 類數(shù)組對象
 var div2 = document.getElementsByTagName("name")

4.特殊集合

document.anchors 文檔中帶 name 屬性的 <a>元素
document.applets：所有<applets>元素（不推薦使用岳锁，了解即可）
document forms：所有<form>元素
document.images：所有<img>元素
document.links：所有帶href特性的<a>元素
5.文檔寫入
write(): 寫入绩衷，接受一個(gè)字符串參數(shù)
writeln(): 接受，一個(gè)字符串參數(shù)在寫入流的結(jié)尾加個(gè) '\n'
open(): 打開網(wǎng)頁輸入流
close(): 關(guān)閉網(wǎng)頁輸入流

3.Element類型

Element 節(jié)點(diǎn)的特性：

nodeType的值為1
nodeName的值為元素標(biāo)簽名
nodeValue的值為null
parentNode的值為Document 或 Element
ownerDocument 值為null
其子節(jié)點(diǎn)可能是Element激率、Text咳燕、Comment、ProcessingInstruction乒躺、CDATASection或EntryReference
1.nodeName 和 tagname 返回的都是元素的標(biāo)簽名

<div id = "ID" class = "name" name = "name"><div>

var div = document.getElementById("ID")
//true
alter(div.tagName == div.nodeName)

2.取得屬性

<div id = "myId" class = "name" name = "name"><div>

var div = document.getElementById("myId")
//myId
alter(div.getAttribute("id"))  
alter(div.getAttribute("class"))

3.設(shè)置屬性

<div id = "myId" class = "name" name = "name"><div>

var div = document.getElementById("myId")
//myId
alter(div.setAttribute("id","newId"))  
alter(div.getAttribute("class","ft"))

4.創(chuàng)建元素

var div = document.createElement("div")

4.Text類型

Text 節(jié)點(diǎn)的特性：

nodeType的值為3
nodeName的值為 "#text"
nodeValue的值為節(jié)點(diǎn)所包含的文本
parentNode的值為 Element
沒有子節(jié)點(diǎn)
可以通過 nodeValue屬性或者data屬性訪問/Text節(jié)點(diǎn)包含的文本
操作節(jié)點(diǎn)文本的方法：
appendData(text) ：將text添加到節(jié)點(diǎn)末尾
deleteData(offset招盲，count) ：刪除從offset位置開始的的count個(gè)字符。
insertData(offset嘉冒，text) ：從offset位置開始插入text曹货。
replaceData(offset，count讳推，text) ：用text替換從從offset位置開始的的count個(gè)字符控乾。
splitText(offset) ：從offset位置分割成兩個(gè)文本節(jié)點(diǎn)
subStringData(offset，count) ：提取從offset開始的count個(gè)字符組成的文本

1.創(chuàng)建文本節(jié)點(diǎn)

var textNode = document.creteTextNode("hello world ")

5.Comment類型

注釋在DOM中用Comment類型表示
Comment 節(jié)點(diǎn)的特性：

nodeType的值為8
nodeName的值為 ”#Comment“
nodeValue的值為注釋的內(nèi)容
parentNode的值為Document 或 Element
沒有子節(jié)點(diǎn)

可以通過 nodeValue屬性或者data屬性訪問注釋節(jié)點(diǎn)包含的文本