javascript DOM對象的學習實例代碼

2019-11-21 01:18:15

字體：大中小

來源：轉載

供稿：網友

<!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對象的學習</title> <script language="javascript" type="text/javascript"> function searchNode(){ /*文本節點*/ /*元素節點*/ /*屬性節點*/ var nodes=document.getElementsByTagName("li"); alert("節點數"+nodes.length+"第一個節點元素的名稱"+nodes[0].tagName+";第四個節點的第一個節點文本"+nodes[3].childNodes[0].nodeValue); var nodes2=document.getElementsByTagName("ul"); var subnodes=nodes2[1].getElementsByTagName("li"); alert("節點數"+subnodes.length+";第一個節點元素的名稱"+subnodes[0].tagName+";第一個節點元素的第一個節點文本"+subnodes[0].childNodes[0].nodeValue); var nodeID=document.getElementById("liNode"); alert("節點的名稱"+nodeID.tagName+";第一點節點的第一節點的文本"+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); //節點屬性 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("這是第二個節點"); p.appendChild(text); document.body.appendChild(p); //innerHTML的使用 var inner=document.getElementById("inner"); alert(inner.innerHTML); inner.innerHTML="<img src='https://www.jb51.netimages/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="https://www.jb51.net//m.survivalescaperooms.com/images/logo.gif" title="小屋" alt="個人主頁" /> <p>這是第一個節點</p> <div   class="iwvjtn8m0"   id="inner"><p>innerHTML的使用</p></div> </body> </html>

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

上一篇：javascript 變量作用域代碼分析

下一篇：javascript 改變字體大小方法集合原創