Dom文檔對像模型知識點梳理匯總_第1頁
Dom文檔對像模型知識點梳理匯總_第2頁
Dom文檔對像模型知識點梳理匯總_第3頁
Dom文檔對像模型知識點梳理匯總_第4頁
Dom文檔對像模型知識點梳理匯總_第5頁
已閱讀5頁，還剩6頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

什么是Dom？Dom:英文全稱－DocumentObjectModel譯成中文即是：文檔對像模型．聽起來很術(shù)語，其實就是文檔內(nèi)容的結(jié)構(gòu)關(guān)系．文檔類型可以是HTML或XML

Dom具有對Html文件和XML文件元素的訪問控制能力，簡單點說利用Dom可以對某個html或xml文件添加，修改，刪除元素．更改其現(xiàn)有的結(jié)構(gòu)或內(nèi)容．如果你未接觸過Dom，你會發(fā)現(xiàn)Dom太神奇了．．．不管你是菜鳥還是高手，在這個注重用戶體驗的web設(shè)計時代里，Dom是至關(guān)重要的.如果你是一名有經(jīng)驗的web設(shè)計者，你應(yīng)該看到過或用過以下這些命令或方法getElementByIdgetElementsByTagNameoffsetParentappendChildgetAttribute不過至今仍有人認為這些都是JavaScript中的東西，其實不然，這些全是Dom中很重要的方法！Dom手冊下載地址Dom并非一種編程語言，Dom只是提供了一系列的接口，利用Dom的這些接口可以很方便的讀取，修改，刪除Html和XML文件中的標簽元素和文本內(nèi)容．在這里我們側(cè)重于講解Dom對Html文件的操作．那么Dom是如何讀取和管理Html文件的呢？首先你必須要了解html的源碼結(jié)構(gòu)．看圖

如果你有學(xué)過或?qū)戇^Html，那么你會對上圖一目了然．我想要說明的就是Html的源碼結(jié)構(gòu)是有層次的，而且標簽與杯簽之間還存在著父子，或相鄰的關(guān)系．上圖不難看出HTML這個標簽是最頂級的．最上層的．也可以理解成html文件的根．其次是Head與Body標簽．這兩個標簽是相鄰的．也可以理解成兄弟關(guān)系．但他們都屬于html的子標簽或稱為子元素．然后Body標簽內(nèi)包含了Table,Div,Div．這三個標簽?zāi)憧梢岳斫鉃锽ody的子標簽或子元素．Body為父他們?yōu)樽樱瓾ead所含的標簽也是同理．另外第一個div內(nèi)包含了另一個div．第二個div內(nèi)包含了一些文本內(nèi)容．他們的關(guān)系也是父子關(guān)系．Dom正是利用了Html源碼的這種關(guān)系結(jié)構(gòu)．而巧妙的在你的html源碼中行走自如．猶如一位武林高手一般．盡情地施展他的＂凌波微步＂．看下面的代碼．代碼結(jié)構(gòu)與上圖是吻合的．不同的是多了幾個按扭來執(zhí)行一些dom的指令操作．運行以后你便走進了Dom的神秘與精彩世界?。?！<html><head><title>這是網(wǎng)頁的標題</title><link/><meta/><body><tableborder="1"><table><div><div></div></div><div>文本內(nèi)容</div><inputtype="button"value="彈出html標簽"onclick="alert_HTML()"/><inputtype="button"value="彈出body標簽"onclick="alert_Body()"/><inputtype="button"value="彈出head標簽"onclick="alert_Head()"/><inputtype="button"value="修改網(wǎng)頁標題"onclick="up_Title()"/><inputtype="button"value="更改表格"onclick="up_Table()"/><inputtype="button"value="獲取第一個div和他的子元素"onclick="get_Div()"/><inputtype="button"value="更改第二個div中的文本內(nèi)容"onclick="up_div_text()"/></body></html><scripttype="text/javascript">functionalert_HTML(){//彈出html標簽函數(shù)varhtml=document.documentElement;alert(html.tagName);}functionalert_Body(){//彈出body標簽函數(shù)varbody=document.body;alert(body.tagName);}functionalert_Head(){//彈出head標簽函數(shù)，varhtml=document.documentElement;//head是html標簽中的第一個子元素//childNodes可以獲取某一標簽內(nèi)的所有子元素varhead=html.childNodes[0].tagName;alert(head);}functionup_Title(){//注意title標簽內(nèi)的＂這是網(wǎng)頁的標題＂將被改變．document.title="Web圈提提供的Dom圖解入門教程";}functionup_Table(){//為表格添加行，添加列并寫入文本內(nèi)容varTable=document.getElementsByTagName("table")[0];//獲取網(wǎng)頁內(nèi)第一個表格varTr=Table.insertRow(0);//為表格添加一行varTd=Tr.insertCell(0);//為新建的行，添加一列Td.innerHTML="我是表格中的文本";//利用innerHTML屬性向td寫入文本}functionget_Div(){//獲取第一個div和他的孩子vardiv=document.getElementsByTagName("div")[0];alert("我是第一個"+div.tagName);varchild_div=div.childNodes[0];//雖然是子div,但是按解析順序他在該頁內(nèi)是第二個出現(xiàn)的div,alert("我是第一個div的子元素．我也是"+child_div.tagName);}functionup_div_text(){vardiv=document.getElementsByTagName("div")[2];//其實如果按解析順序該div在本頁應(yīng)該是第3個，div.innerHTML="歡迎閱讀web圈提供的Dom圖解入門教程．作者：康董";}</script>上面演示的代碼實例．略有繁瑣．并非是Dom最優(yōu)秀的使用方法．但足以讓你了解Dom是怎樣工作的．

下面將演示Dom迅速訪問某個標簽的方法．可以讓你在成千上萬個html標簽中迅速找到你想的某個標簽．比如你可以為你的html標簽添加一個ID屬性．在Dom中有一個getElementById方法．該方法可以根據(jù)html標簽的ID屬性值，迅速找到這個標簽．然后對其進行更改或其他操作．

下面的代碼我只為table和第一個div添加一個id屬性值．利用getElementByid迅速向able和第一個div的子div添加內(nèi)容<html><head><title>這是網(wǎng)頁的標題</title><link/><meta/><body><tableid="a"border="1"><table><divid="b"><div></div></div><div>文本內(nèi)容</div><inputtype="button"value="更改table"onclick="up_table()"/><inputtype="button"value="為第一個div的子div寫入文本"onclick="up_div()"/></body></html><scripttype="text/javascript">functionup_table(){//更改table函數(shù)varTable=document.getElementById("a");//根據(jù)id獲取標簽元素varTr=Table.insertRow(0);varTd=Tr.insertCell(0);Td.innerHTML="歡迎光臨Web圈，網(wǎng)址：";}functionup_div(){//為第一個div的子div添加文本內(nèi)容vardiv=document.getElementById("b");div.childNodes[0].innerHTML="我是子div，我被寫入文本了";}</script>上面的兩個例子中分別使用了Dom的以下方法：

document：對當前整個Html網(wǎng)頁的引用

documentElement：獲取html和xml文件中的根元素．在html文件中總是返回Html標簽．在xml文件中總是返回最頂層的那個元素

getElementsByTagName：根據(jù)指定的標簽名稱，來獲取網(wǎng)頁中所有相同的標簽元素．如：table,或div．則會找出網(wǎng)頁中所有table元素，或所有div元素．以一個類似數(shù)組的方式來返回對這些元素的引用．

getElementById：根據(jù)指定的標簽id值．來尋找標簽元素．并返回對該標簽的引用

childNodes：獲取某個標簽下所有的子標簽元素，也就是我所說的孩子元素．并以一個類似數(shù)組的方式來返回對所有子元素的引用

insertRow：為表格增加一行

insertCell：為表格的某行增加一列

該入門教程只講解了Dom中的一部份知識，請了解更多關(guān)于Dom的內(nèi)容Dom可以在網(wǎng)頁中做什么？HTMLDom中最常用的幾個方法之查找元素Dom之引用當前整個網(wǎng)頁文檔：documentDom如何快速在網(wǎng)頁中查找某一元素：getElementByIdDom中查找一組標簽，具有相同名稱的標簽元素：getElementsByTagName根據(jù)標簽的Id屬性值或name屬性來查找多個元素：getElementsByNameDom中創(chuàng)建，添加，刪除，修改，替換，復(fù)制，網(wǎng)頁中的標簽和文本內(nèi)容的方法如下．在網(wǎng)頁中的創(chuàng)建一個標簽元素：createElement創(chuàng)建一段文本內(nèi)容：createTextNode向網(wǎng)頁中添加元素：appendChild刪除元素的Dom方法是：removeChild修改網(wǎng)頁中標簽元素的屬性：setAttribute替換已存在的標簽或元素：replaceChild復(fù)制克隆已存在的標簽或元素：cloneNode獲取和修改元素內(nèi)的html標簽與文本內(nèi)容：innerHTML獲取或修改元素的文本內(nèi)容，僅支持IE：innerText獲取或修改元素的文本內(nèi)容，支持FF：textContentHTMLDom中還專門提供了一組接口用來操作網(wǎng)頁中的表格Table元素HTMLDom中的insertRow方法可以為表格增加一行刪除表格中一行的方法是：deleteRowHTMLDom中的insertCell方法可以為表格某行中增加一列刪除行中的一列的方法是：deleteCellHTMLDom中的createCaption方法可以為表格創(chuàng)建一個標題HTMLDom中的createTHead方法可以為表格創(chuàng)建一個TheadHTMLDom中的createT

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論