那么Dom是如何讀取和管理Html文件的呢？首先你必須要了解html的源碼結(jié)構(gòu)．看圖

如果你有學(xué)過(guò)或?qū)戇^(guò)Html，那么你會(huì)對(duì)上圖一目了然．我想要說(shuō)明的就是Html的源碼結(jié)構(gòu)是有層次的，而且標(biāo)簽與杯簽之間還存在著父子，或相鄰的關(guān)系．上圖不難看出HTML這個(gè)標(biāo)簽是最頂級(jí)的．最上層的．也可以理解成html文件的根．其次是Head與Body標(biāo)簽．這兩個(gè)標(biāo)簽是相鄰的．也可以理解成兄弟關(guān)系．但他們都屬于html的子標(biāo)簽或稱為子元素．然后Body標(biāo)簽內(nèi)包含了Table,Div,Div．這三個(gè)標(biāo)簽?zāi)憧梢岳斫鉃锽ody的子標(biāo)簽或子元素．Body為父他們?yōu)樽樱瓾ead所含的標(biāo)簽也是同理．另外第一個(gè)div內(nèi)包含了另一個(gè)div．第二個(gè)div內(nèi)包含了一些文本內(nèi)容．他們的關(guān)系也是父子關(guān)系．Dom正是利用了Html源碼的這種關(guān)系結(jié)構(gòu)．而巧妙的在你的html源碼中行走自如．猶如一位武林高手一般．盡情地施展他的＂凌波微步＂．看下面的代碼．代碼結(jié)構(gòu)與上圖是吻合的．不同的是多了幾個(gè)按扭來(lái)執(zhí)行一些dom的指令操作．運(yùn)行以后你便走進(jìn)了Dom的神秘與精彩世界！??！

上面演示的代碼實(shí)例．略有繁瑣．并非是Dom最優(yōu)秀的使用方法．但足以讓你了解Dom是怎樣工作的．
下面將演示Dom迅速訪問(wèn)某個(gè)標(biāo)簽的方法．可以讓你在成千上萬(wàn)個(gè)html標(biāo)簽中迅速找到你想的某個(gè)標(biāo)簽．比如你可以為你的html標(biāo)簽添加一個(gè) ID屬性．在Dom中有一個(gè)getElementById方法．該方法可以根據(jù)html標(biāo)簽的ID屬性值，迅速找到這個(gè)標(biāo)簽．然后對(duì)其進(jìn)行更改或其他操作．
下面的代碼我只為table和第一個(gè)div添加一個(gè)id屬性值．利用getElementByid迅速向able和第一個(gè)div的子div添加內(nèi)容

上面的兩個(gè)例子中分別使用了Dom的以下方法：
document：對(duì)當(dāng)前整個(gè)Html網(wǎng)頁(yè)的引用
documentElement：獲取html和xml文件中的根元素．在html文件中總是返回Html標(biāo)簽．在xml文件中總是返回最頂層的那個(gè)元素
getElementsByTagName：根據(jù)指定的標(biāo)簽名稱，來(lái)獲取網(wǎng)頁(yè)中所有相同的標(biāo)簽元素．如：table,或div．則會(huì)找出網(wǎng)頁(yè)中所有table元素，或所有div元素．以一個(gè)類似數(shù)組的方式來(lái)返回對(duì)這些元素的引用．
getElementById：根據(jù)指定的標(biāo)簽id值．來(lái)尋找標(biāo)簽元素．并返回對(duì)該標(biāo)簽的引用
childNodes：獲取某個(gè)標(biāo)簽下所有的子標(biāo)簽元素，也就是我所說(shuō)的孩子元素．并以一個(gè)類似數(shù)組的方式來(lái)返回對(duì)所有子元素的引用
insertRow：為表格增加一行
insertCell：為表格的某行增加一列
該入門(mén)教程只講解了Dom中的一部份知識(shí)，請(qǐng)了解更多關(guān)于Dom的內(nèi)容
作者：康董 出自：Www.Web666.Net

最新評(píng)論