Dom入門教程圖解推薦

2019-11-21 00:18:17

字體：大中小

供稿：網(wǎng)友

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

如果你有學(xué)過或?qū)戇^Html，那么你會對上圖一目了然．我想要說明的就是Html的源碼結(jié)構(gòu)是有層次的，而且標(biāo)簽與杯簽之間還存在著父子，或相鄰的關(guān)系．上圖不難看出HTML這個標(biāo)簽是最頂級的．最上層的．也可以理解成html文件的根．其次是Head與Body標(biāo)簽．這兩個標(biāo)簽是相鄰的．也可以理解成兄弟關(guān)系．但他們都屬于html的子標(biāo)簽或稱為子元素．然后Body標(biāo)簽內(nèi)包含了Table,Div,Div．這三個標(biāo)簽?zāi)憧梢岳斫鉃锽ody的子標(biāo)簽或子元素．Body為父他們?yōu)樽樱瓾ead所含的標(biāo)簽也是同理．另外第一個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的指令操作．運(yùn)行以后你便走進(jìn)了Dom的神秘與精彩世界！！！

<html> <head> <title>這是網(wǎng)頁的標(biāo)題</title> <link /> <meta /> <body> <table border="1"><table> <div><div></div></div> <div>文本內(nèi)容</div> <input type="button" value="彈出html標(biāo)簽" onclick="alert_HTML()"/> <input type="button" value="彈出body標(biāo)簽" onclick="alert_Body()"/> <input type="button" value="彈出head標(biāo)簽" onclick="alert_Head()"/> <input type="button" value="修改網(wǎng)頁標(biāo)題" onclick="up_Title()"/> <input type="button" value="更改表格" onclick="up_Table()"/> <input type="button" value="獲取第一個div和他的子元素" onclick="get_Div()"/> <input type="button" value="更改第二個div中的文本內(nèi)容" onclick="up_div_text()"/> </body> </html> <script type="text/javascript"> function alert_HTML(){ //彈出html標(biāo)簽函數(shù) var html = document.documentElement; alert(html.tagName); } function alert_Body(){ //彈出body標(biāo)簽函數(shù) var body = document.body; alert(body.tagName); } function alert_Head(){//彈出head標(biāo)簽函數(shù)， var html = document.documentElement; //head是html標(biāo)簽中的第一個子元素 //childNodes可以獲取某一標(biāo)簽內(nèi)的所有子元素 var head = html.childNodes[0].tagName; alert(head); } function up_Title(){ //注意title標(biāo)簽內(nèi)的＂這是網(wǎng)頁的標(biāo)題＂將被改變． document.title = "Web圈提提供的Dom圖解入門教程"; } function up_Table(){//為表格添加行，添加列并寫入文本內(nèi)容 var Table = document.getElementsByTagName("table")[0];//獲取網(wǎng)頁內(nèi)第一個表格 var Tr = Table.insertRow(0);//為表格添加一行 var Td = Tr.insertCell(0);//為新建的行，添加一列 Td.innerHTML = "我是表格中的文本"; //利用innerHTML屬性向td寫入文本 } function get_Div(){//獲取第一個div和他的孩子 var div = document.getElementsByTagName("div")[0]; alert("我是第一個"+div.tagName); var child_div = div.childNodes[0];//雖然是子div,但是按解析順序他在該頁內(nèi)是第二個出現(xiàn)的div, alert("我是第一個div的子元素．我也是"+child_div.tagName); } function up_div_text(){ var div = document.getElementsByTagName("div")[2];//其實如果按解析順序該div在本頁應(yīng)該是第3個， div.innerHTML = "歡迎閱讀web圈提供的Dom圖解入門教程．m.survivalescaperooms.com 作者：康董"; } </script>

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

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

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

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

上一篇：javascript 寶寶出生倒計時實現(xiàn)代碼

下一篇：判斷客戶端瀏覽器是否安裝了Flash插件的多種方法