javascript DOM對(duì)象的學(xué)習(xí)實(shí)例代碼

更新時(shí)間：2009年06月26日 13:19:03 作者：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>DOM對(duì)象的學(xué)習(xí)</title> <script language="javascript" type="text/javascript"> function searchNode(){ /*文本節(jié)點(diǎn)*/ /*元素節(jié)點(diǎn)*/ /*屬性節(jié)點(diǎn)*/ var nodes=document.getElementsByTagName("li"); alert("節(jié)點(diǎn)數(shù)"+nodes.length+"第一個(gè)節(jié)點(diǎn)元素的名稱"+nodes[0].tagName+";第四個(gè)節(jié)點(diǎn)的第一個(gè)節(jié)點(diǎn)文本"+nodes[3].childNodes[0].nodeValue); var nodes2=document.getElementsByTagName("ul"); var subnodes=nodes2[1].getElementsByTagName("li"); alert("節(jié)點(diǎn)數(shù)"+subnodes.length+";第一個(gè)節(jié)點(diǎn)元素的名稱"+subnodes[0].tagName+";第一個(gè)節(jié)點(diǎn)元素的第一個(gè)節(jié)點(diǎn)文本"+subnodes[0].childNodes[0].nodeValue); var nodeID=document.getElementById("liNode"); alert("節(jié)點(diǎn)的名稱"+nodeID.tagName+";第一點(diǎn)節(jié)點(diǎn)的第一節(jié)點(diǎn)的文本"+nodeID.childNodes[0].nodeValue); //遍歷元素 var ulNodes=document.getElementById("ulNode"); var DOMString=""; if(ulNodes.hasChildNodes()){ var subULNodes=ulNodes.childNodes; for(var i=0;i<subULNodes.length;i++){ DOMString=DOMString+subULNodes[i].childNodes[0].nodeValue+"\n"; } } alert(DOMString); //節(jié)點(diǎn)屬性 var imgTitle=document.getElementsByTagName("img")[0]; var titleString=imgTitle.getAttribute("title"); var altString=imgTitle.getAttribute("alt"); alert(titleString+"\n"+altString); var p=document.createElement("p"); var text=document.createTextNode("這是第二個(gè)節(jié)點(diǎn)"); p.appendChild(text); document.body.appendChild(p); //innerHTML的使用 var inner=document.getElementById("inner"); alert(inner.innerHTML); inner.innerHTML="<img src='images/album.gif'/>"; } </script> </head> <body onload="searchNode()"> <ul id="ulNode"> <li>java</li> <li>javascript</li> <li>CSS</li> </ul> <ul> <li id="liNode">ajax</li> <li>c#</li> <li>c++</li> </ul> <img src="http://www.dhdzp.com/images/logo.gif" title="小屋" alt="個(gè)人主頁(yè)" /> <p>這是第一個(gè)節(jié)點(diǎn)</p> <div   class="8g2222e"   id="inner"><p>innerHTML的使用</p></div> </body> </html>

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

您可能感興趣的文章:

相關(guān)文章

移動(dòng)端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
JS刪除String里某個(gè)字符的方法
這篇文章主要介紹了JS刪除String里某個(gè)字符的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下
2019-06-06
原生JS實(shí)現(xiàn)《別踩白塊》游戲（兼容IE）
本文主要介紹了原生JS實(shí)現(xiàn)《別踩白塊》游戲（兼容IE）的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
javascript格式化指定日期對(duì)象的方法
這篇文章主要介紹了javascript格式化指定日期對(duì)象的方法,涉及javascript針對(duì)日期對(duì)象操作的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
JS中完美兼容各大瀏覽器的scrolltop方法
最近用到scrolloTop()想去獲取滾動(dòng)條距離頂部的距離，結(jié)果只有chrome下面可以正常的獲取scrollTop，ff和ie下這個(gè)值都等于0，使得許多效果比如屏幕滾動(dòng)等等均無(wú)法正常實(shí)現(xiàn)。究其原因是scrollTop()在各個(gè)瀏覽器中的兼容性問(wèn)題，今天我們就來(lái)詳細(xì)探討下。
2015-04-04
正則表達(dá)式在js前端的15個(gè)使用場(chǎng)景梳理總結(jié)
本篇帶來(lái)15個(gè)正則使用場(chǎng)景，按需索取，收藏恒等于學(xué)會(huì)！！有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
javascript css styleFloat和cssFloat
在寫js操作css的過(guò)程中發(fā)現(xiàn)float屬性在IE和firefox下對(duì)應(yīng)的js腳本是不一樣的，IE下對(duì)應(yīng)得是 styleFloat，firefox,chorme,safari下對(duì)應(yīng)的是cssFloat，可用in運(yùn)算符去檢測(cè)style是否包含此屬性。
2010-03-03
JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
詳解Matlab中 sort 函數(shù)用法
這篇文章主要介紹了matlab中 sort 函數(shù)用法的相關(guān)資料,需要的朋友可以參考下
2016-03-03
javascript自動(dòng)給文本url地址增加鏈接的方法分享
這篇文章主要介紹了javascript自動(dòng)給文本url地址增加鏈接的方法，有需要的朋友可以參考一下
2014-01-01