DOM（文檔對(duì)象模型）是針對(duì)HTML和XML文檔的API，描繪了一個(gè)層次化的節(jié)點(diǎn)樹(shù)
- 節(jié)點(diǎn)層次
DOM可以將任何HTML或XML文檔描繪成一個(gè)由多層節(jié)點(diǎn)構(gòu)成的結(jié)構(gòu)
- Node類(lèi)型
js中所有節(jié)點(diǎn)類(lèi)型都繼承自Node類(lèi)型
a.nodeType屬性 表明節(jié)點(diǎn)類(lèi)型,nodeName杉辙、nodeValue
b.節(jié)點(diǎn)關(guān)系 childNodes屬性 parentNode屬性 previousSibling屬性 nextSibling屬性 firstChild屬性 lastChild屬性
c.操作節(jié)點(diǎn) appendChild insertBefore replaceChild removeChild
d.其他方法 cloneNode,創(chuàng)建調(diào)用這個(gè)方法的節(jié)點(diǎn)的一個(gè)完全相同的副本,cloneNode(true)表示深復(fù)制，會(huì)將子節(jié)點(diǎn)也復(fù)制下來(lái)
- Document類(lèi)型
Document類(lèi)型表示文檔
文檔標(biāo)題------ title
頁(yè)面完整url------ URL
頁(yè)面域名 -------domain
鏈接到當(dāng)前頁(yè)面的頁(yè)面url -------referrer
查找元素
getElementById()
getElementsByTagName()
文檔寫(xiě)入
write()//在頁(yè)面呈現(xiàn)過(guò)程中直接向其中輸出了內(nèi)容,在文檔加載結(jié)束后再調(diào)用，輸出的內(nèi)容會(huì)重寫(xiě)整個(gè)頁(yè)面
writeIn()
open()//打開(kāi)網(wǎng)頁(yè)輸出流
close()//關(guān)閉網(wǎng)頁(yè)輸出流
- Element類(lèi)型
用于表現(xiàn)XML和HTML元素，提供了對(duì)元素標(biāo)簽名蹬碧、子節(jié)點(diǎn)及特性的訪問(wèn)
tagName/nodeName 訪問(wèn)元素的標(biāo)簽名
1) html元素
id，title,className屬性
2)取得特性
getAttribute() //參數(shù)為要獲取的屬性名
3)設(shè)置特性
setAttribute()//參數(shù)為要設(shè)置的屬性名和值
4)刪除特性
removeAttribute()
5)attributes屬性
可遍歷元素屬性
6)創(chuàng)建元素
createElement()創(chuàng)建新元素炒刁，需要配合使用appendChild()恩沽，inser- tBefore() ，replaceChild() 方法將新元素添加至文檔樹(shù)
- Text類(lèi)型
開(kāi)始與結(jié)束標(biāo)簽之間只要存在內(nèi)容翔始，就會(huì)創(chuàng)建一個(gè)文本節(jié)點(diǎn)
1.創(chuàng)建文本節(jié)點(diǎn)
createTextNode()//創(chuàng)建新文本節(jié)點(diǎn)罗心，參數(shù)為要插入節(jié)點(diǎn)中的文本
2.規(guī)范化文本節(jié)點(diǎn)
normalize()//如果在一個(gè)包含兩個(gè)或多個(gè)文本節(jié)點(diǎn)的父元素上調(diào)用no'r'ma'li'ze（）方法里伯，會(huì)將所有文本節(jié)點(diǎn)合并成一個(gè)文本節(jié)點(diǎn)
3.分割文本節(jié)點(diǎn)
splitText()//按照指定位置分割nodeValue的值，將一個(gè)文本節(jié)點(diǎn)分成兩個(gè)文本節(jié)點(diǎn)
- Comment類(lèi)型
注釋在Dom中用Comment類(lèi)型表示 - CDATASection類(lèi)型
只針對(duì)基于XML類(lèi)型的文檔 - DocumentType類(lèi)型
包含與doctype有關(guān)的信息 - Attr類(lèi)型
元素的特性在Dom中用Attr類(lèi)型表示
name//屬性名稱
value//屬性值
specified//布爾值渤闷，用來(lái)區(qū)分屬性在代碼中是指定的還是默認(rèn)的
- Dom操作技術(shù)
- 動(dòng)態(tài)腳本
通過(guò)src引入外部文件
<script type="text/javascript" src="client.js"></script>
直接插入
<script type="text/javascript">
function sayHi(){
alert("hi");
}
</script>
- 動(dòng)態(tài)樣式
外部引入樣式
<link rel="stylesheet" type="text/css" href="styles.css">
嵌入樣式
<style type="text/css">
body {
background-color: red;
}
</style>
- 操作表格
- 使用NodeList
每當(dāng)文檔結(jié)構(gòu)發(fā)生變化疾瓮，NodeList就會(huì)更新，所有NodeList對(duì)象都是在訪問(wèn)Dom文檔時(shí)實(shí)時(shí)運(yùn)行查詢
