Dom入門教程圖解推薦

更新時間：2010年08月11日 23:26:43 作者：

Dom并非一種編程語言，Dom只是提供了一系列的接口，利用Dom的這些接口可以很方便的讀取，修改，刪除Html和XML文件中的標簽元素和文本內容．在這里我們側重于講解Dom對Html文件的操作．

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

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

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

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

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

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