DOM文檔對(duì)象模型
DOM文檔對(duì)象模型是基于HTML樹的api歌殃,這里可以把HTML結(jié)構(gòu)看成是一顆樹形結(jié)構(gòu)素邪,使用DOM可以操作樹中的節(jié)點(diǎn)揭朝,即操作(增刪改查)HTML標(biāo)簽庐舟。
上圖是一個(gè)簡單的DOM樹形結(jié)構(gòu)圖欣除,可以使用document對(duì)象獲取DOM,這個(gè)對(duì)象是window對(duì)象下的挪略,在使用時(shí)历帚,可以省略window伟端。
可以把一個(gè)HTML標(biāo)簽看做是一個(gè)對(duì)象政敢,標(biāo)簽中的屬性對(duì)應(yīng)的就是對(duì)象中的屬性,DOM提供了訪問他們的方法彤悔。
getElementById
????getElementById根據(jù)html標(biāo)簽的id來獲取標(biāo)簽對(duì)象
getElementsByName
????getElementsByName根據(jù)html標(biāo)簽的name來獲取一個(gè)數(shù)組對(duì)象摊求,在html標(biāo)簽中name值是可以重復(fù)的禽拔,所以該方法會(huì)返回一個(gè)數(shù)組對(duì)象
getElementsByTagName
????getElementsByTagName根據(jù)標(biāo)簽的名字來獲取數(shù)組對(duì)象
hasChildNodes
????hasChildNodes判斷當(dāng)前html標(biāo)簽對(duì)象下是否包含子節(jié)點(diǎn)。
nodeName室叉、nodeType和nodeValue
????在文檔中每個(gè)節(jié)點(diǎn)都有這三個(gè)屬性:
????nodeName睹栖,獲取節(jié)點(diǎn)名字
????????????如果節(jié)點(diǎn)是元素節(jié)點(diǎn),nodeName返回這個(gè)元素的名稱
????????????如果是屬性節(jié)點(diǎn)太惠,nodeName返回這個(gè)屬性的名稱
????????????如果是文本節(jié)點(diǎn)磨淌,返回一個(gè)內(nèi)容為#text的字符串
????nodeType疲憋,返回一個(gè)整數(shù)凿渊,數(shù)值表示節(jié)點(diǎn)的類型,常用的有下面三個(gè):
????????????元素節(jié)點(diǎn)缚柳,返回1
????????????屬性節(jié)點(diǎn)埃脏,返回2
????????????文本節(jié)點(diǎn),返回3
????nodeValue秋忙,獲取節(jié)點(diǎn)的當(dāng)前值
????????????元素節(jié)點(diǎn)彩掐,null
????????????屬性節(jié)點(diǎn),當(dāng)前屬性的值
????????????文本節(jié)點(diǎn)灰追,返回文本內(nèi)容
replaceNode
????????replaceNode替換節(jié)點(diǎn)
getAttribute
????????getAttribute獲取標(biāo)簽中的屬性堵幽,除了使用對(duì)象名.屬性名的方式來獲取屬性之外還可以使用getAttribute()方法來獲取指定的屬性值
setAttribute
????????setAttribute給對(duì)象添加屬性
createElement
????????createElement可以創(chuàng)建一個(gè)標(biāo)簽,createTextNode向標(biāo)簽中添加文本
insertBefore
????????insertBefore在指定位置之前插入標(biāo)簽弹澎。
removeChild
????????removeChild刪除指定元素朴下。
innerHTML
????????大部分瀏覽器中都支持innerHTML,但是他不是DOM標(biāo)準(zhǔn)的組成部分苦蒿∨闺剩可以使用innerHTML獲取對(duì)象的內(nèi)容。