DOM
node 節(jié)點(diǎn) attribute 屬性 comment注釋
1. 什么是 DOM？
Dom是js操作網(wǎng)頁的接口嘿期，全稱為“文檔對象模型”（Document Object Model）
2.DOM樹：瀏覽器會根據(jù)Dom模型像寒，將結(jié)構(gòu)化文檔（html）解析成一系列的節(jié)點(diǎn)，再由這些節(jié)點(diǎn)組成一個(gè)樹狀結(jié)構(gòu)（DOM Tree）
3.節(jié)點(diǎn) node
DOM的最小組成單位就是node 文檔的樹形結(jié)構(gòu)（DOM樹）就是由各種不同類型的節(jié)點(diǎn)組成，每個(gè)節(jié)點(diǎn)可以看作文檔樹的一片葉子。
4.節(jié)點(diǎn)的7種類型 nodeType
A.Document整個(gè)文檔樹的頂層節(jié)點(diǎn)------------------------------------------------文檔節(jié)點(diǎn)9
B.DocumentType標(biāo)簽（<!DOCTYPE html>）-----------------------文檔類型節(jié)點(diǎn)10
C.Element 網(wǎng)頁的各種html標(biāo)簽（<body> <a>）---------------------------元素節(jié)點(diǎn)1
D.Attribute 網(wǎng)頁元素的屬性（例如class=“a” src=“img.png”）------屬性節(jié)點(diǎn)2
E.Text 標(biāo)簽之間或標(biāo)簽包含的文本-------------------------------------------------文本節(jié)點(diǎn)3
F.Comment 注釋--------------------------------------------------------------------------注釋節(jié)點(diǎn)8
G.DocumentFragment 文檔的片段 //不常用---------------------------------文檔片斷節(jié)點(diǎn)11
5.節(jié)點(diǎn)的屬性 nodeName
A.文檔節(jié)點(diǎn)---------------------------#document
B.文檔類型節(jié)點(diǎn)--------------------文檔的類型
C.元素節(jié)點(diǎn)--------------------------大寫的標(biāo)簽名
D.屬性節(jié)點(diǎn)--------------------------屬性的名稱
E.文本節(jié)點(diǎn)---------------------------#text
F.注釋節(jié)點(diǎn)---------------------------#comment
G.文檔片斷節(jié)點(diǎn)--------------------#document-fragment
6.節(jié)點(diǎn)的屬性nodeValue
nodeValue返回節(jié)點(diǎn)的文本值 可讀可寫
<div id="div">hello word</div>
var div = document.getElementById("div")
div.nodeValue//null
div.firstChild.nodeValue
只有文本節(jié)點(diǎn)有
7.節(jié)點(diǎn)的屬性 textContent
textContent返回當(dāng)前的節(jié)點(diǎn)和他所有后代節(jié)點(diǎn)的文本。忽略標(biāo)簽觉阅。
<div id=”div”>我是<span>span</span></div>
Document.getElementById(‘div’).textContent //我是span
同樣也是一個(gè)可讀可寫的屬性。如果寫入的內(nèi)容包含標(biāo)簽秘车，也會把標(biāo)簽當(dāng)成文本
div.textContent=’<p>我是p</p>’
8.節(jié)點(diǎn)的屬性 nextSibling
NextSibling返回當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)（同級標(biāo)簽）
<div id=’d1’>hello</div> <div id=’d2’>word</div>
Var div1 = document.getElementById(‘div1’)
Var div2 = document.getElementById(‘div2’)
注意：換行符會影響結(jié)果（回車）
如果不存在下一個(gè)兄弟節(jié)點(diǎn) 則會返回一個(gè)null
遍歷所有節(jié)點(diǎn)
var el = document.getElementById(‘div1’).firstChild
while(el!==null){
console.log(el.nodeName)
el=el.nextSibling
}
9.節(jié)點(diǎn)的屬性parrntNade
返回當(dāng)前節(jié)點(diǎn)的父級節(jié)點(diǎn)典勇。只可能是document文檔節(jié)點(diǎn)或元素節(jié)點(diǎn)
10.節(jié)點(diǎn)的屬性 parentElement
返回當(dāng)前節(jié)點(diǎn)的父級元素節(jié)點(diǎn)。沒有返回null
11.節(jié)點(diǎn)的屬性 firstChild lastChild
firstChild返回當(dāng)前節(jié)點(diǎn)中的第一個(gè)子節(jié)點(diǎn)
lastChild 返回當(dāng)前節(jié)點(diǎn)中的最后一個(gè)子節(jié)點(diǎn)
沒有則返回null
12.節(jié)點(diǎn)的屬性 childNodes
childNodes返回當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)叮趴。
是一個(gè)nodelist數(shù)據(jù)
2018-7-17
