Dom文檔對(duì)像模型知識(shí)點(diǎn)梳理匯總_第1頁(yè)
Dom文檔對(duì)像模型知識(shí)點(diǎn)梳理匯總_第2頁(yè)
Dom文檔對(duì)像模型知識(shí)點(diǎn)梳理匯總_第3頁(yè)
Dom文檔對(duì)像模型知識(shí)點(diǎn)梳理匯總_第4頁(yè)
Dom文檔對(duì)像模型知識(shí)點(diǎn)梳理匯總_第5頁(yè)
已閱讀5頁(yè)，還剩6頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

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

Dom具有對(duì)Html文件和XML文件元素的訪問(wèn)控制能力，簡(jiǎn)單點(diǎn)說(shuō)利用Dom可以對(duì)某個(gè)html或xml文件添加，修改，刪除元素．更改其現(xiàn)有的結(jié)構(gòu)或內(nèi)容．如果你未接觸過(guò)Dom，你會(huì)發(fā)現(xiàn)Dom太神奇了．．．不管你是菜鳥還是高手，在這個(gè)注重用戶體驗(yàn)的web設(shè)計(jì)時(shí)代里，Dom是至關(guān)重要的.如果你是一名有經(jīng)驗(yàn)的web設(shè)計(jì)者，你應(yīng)該看到過(guò)或用過(guò)以下這些命令或方法getElementByIdgetElementsByTagNameoffsetParentappendChildgetAttribute不過(guò)至今仍有人認(rèn)為這些都是JavaScript中的東西，其實(shí)不然，這些全是Dom中很重要的方法！Dom手冊(cè)下載地址Dom并非一種編程語(yǔ)言，Dom只是提供了一系列的接口，利用Dom的這些接口可以很方便的讀取，修改，刪除Html和XML文件中的標(biāo)簽元素和文本內(nèi)容．在這里我們側(cè)重于講解Dom對(duì)Html文件的操作．那么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的神秘與精彩世界！?。?lt;html><head><title>這是網(wǎng)頁(yè)的標(biāo)題</title><link/><meta/><body><tableborder="1"><table><div><div></div></div><div>文本內(nèi)容</div><inputtype="button"value="彈出html標(biāo)簽"onclick="alert_HTML()"/><inputtype="button"value="彈出body標(biāo)簽"onclick="alert_Body()"/><inputtype="button"value="彈出head標(biāo)簽"onclick="alert_Head()"/><inputtype="button"value="修改網(wǎng)頁(yè)標(biāo)題"onclick="up_Title()"/><inputtype="button"value="更改表格"onclick="up_Table()"/><inputtype="button"value="獲取第一個(gè)div和他的子元素"onclick="get_Div()"/><inputtype="button"value="更改第二個(gè)div中的文本內(nèi)容"onclick="up_div_text()"/></body></html><scripttype="text/javascript">functionalert_HTML(){//彈出html標(biāo)簽函數(shù)varhtml=document.documentElement;alert(html.tagName);}functionalert_Body(){//彈出body標(biāo)簽函數(shù)varbody=document.body;alert(body.tagName);}functionalert_Head(){//彈出head標(biāo)簽函數(shù)，varhtml=document.documentElement;//head是html標(biāo)簽中的第一個(gè)子元素//childNodes可以獲取某一標(biāo)簽內(nèi)的所有子元素varhead=html.childNodes[0].tagName;alert(head);}functionup_Title(){//注意title標(biāo)簽內(nèi)的＂這是網(wǎng)頁(yè)的標(biāo)題＂將被改變．document.title="Web圈提提供的Dom圖解入門教程";}functionup_Table(){//為表格添加行，添加列并寫入文本內(nèi)容varTable=document.getElementsByTagName("table")[0];//獲取網(wǎng)頁(yè)內(nèi)第一個(gè)表格varTr=Table.insertRow(0);//為表格添加一行varTd=Tr.insertCell(0);//為新建的行，添加一列Td.innerHTML="我是表格中的文本";//利用innerHTML屬性向td寫入文本}functionget_Div(){//獲取第一個(gè)div和他的孩子vardiv=document.getElementsByTagName("div")[0];alert("我是第一個(gè)"+div.tagName);varchild_div=div.childNodes[0];//雖然是子div,但是按解析順序他在該頁(yè)內(nèi)是第二個(gè)出現(xiàn)的div,alert("我是第一個(gè)div的子元素．我也是"+child_div.tagName);}functionup_div_text(){vardiv=document.getElementsByTagName("div")[2];//其實(shí)如果按解析順序該div在本頁(yè)應(yīng)該是第3個(gè)，div.innerHTML="歡迎閱讀web圈提供的Dom圖解入門教程．作者：康董";}</script>上面演示的代碼實(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)容<html><head><title>這是網(wǎng)頁(yè)的標(biāo)題</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="為第一個(gè)div的子div寫入文本"onclick="up_div()"/></body></html><scripttype="text/javascript">functionup_table(){//更改table函數(shù)varTable=document.getElementById("a");//根據(jù)id獲取標(biāo)簽元素varTr=Table.insertRow(0);varTd=Tr.insertCell(0);Td.innerHTML="歡迎光臨Web圈，網(wǎng)址：";}functionup_div(){//為第一個(gè)div的子div添加文本內(nèi)容vardiv=document.getElementById("b");div.childNodes[0].innerHTML="我是子div，我被寫入文本了";}</script>上面的兩個(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：為表格的某行增加一列

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

溫馨提示

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

評(píng)論

0/150

提交評(píng)論