javascript DOM对象的学习实例代码

<!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='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="https://www.jb51.net/images/logo.gif" title="小屋" alt="个人主页" /> <p>这是第一个节点</p> <div id="inner"><p>innerHTML的使用</p></div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

频道导航

javascript DOM对象的学习实例代码

您可能感兴趣的文章: