<script type="text/javascript"> //document.getElementsByTagName(); function SearchDom(){ //得到该页面中所有li标签的对象数组 var oli=document.getElementsByTagName("li"); //数组长度,第一个对象的标签名,第四个对象的文本节点的值. alert("长度:"+oli.length+" 标签名:"+oli[0].tagName+" 第四个li元素的子节点的值:"+ oli[3].childNodes[0].nodeValue); var oul=document.getElementsByTagName("ul"); var ol2=oul[1].getElementsByTagName("li"); alert("长度:"+ol2.length+"标签名:"+oli[1].tagName+" 第二个元素的文本节点值:"+ol2[1].childNodes[0].nodeValue); } </script> </head> <body οnlοad="SearchDom()"> <ul>客户端语言 <li>HTML</li> <li>Javascript</li> <li>Css</li> </ul> <ul>服务端语言 <li>asp.net</li> <li>jsp</li> <li>php</li> </ul> </body> </html> <script type="text/javascript"> //document.getElementById(); function SearchDom(){ var myid=document.getElementById("myid"); alert(myid.tagName+" "+myid.childNodes[0].nodeValue); } </script> </head> <body οnlοad="SearchDom()"> <ul>客户端语言 <li>HTML</li> <li>Javascript</li> <li id="myid">Css</li> </ul> <ul>服务端语言 <li>asp.net</li> <li>jsp</li> <li>php</li> </ul> </body> </html> <script type="text/javascript"> /*父子关系:在访问元素之后Dom提供给我们最重要的一种关系,它可以通过某一个元素遍历其他元素*/ /*在DOM模型中只要获得了某一个元素,便可以通过父子关系,遍历整个HTML文档,通过DOM我们对文档拥有空前的控制能力*/ function MyDOMInspector(){ var str=""; var myList=document.getElementById("myList"); if(myList.hasChildNodes()) var child=myList.childNodes; for(var i=0;i<child.length;i++) str+=child[i].childNodes[0].nodeValue+"\n"; //str+=child[i].tagName+"\n"; //str+=child[i].nodeName+"\n"; alert(str); } </script> </head> <body οnlοad="MyDOMInspector()"> <ul id="myList"> <li>苹果</li> <li>香蕉</li> <li>菜牙</li> <li>橘子</li> <li>西瓜</li> <li>草莓</li> </ul> </body> </html> <script type="text/javascript"> /*节点属性*/ function property(){ var img=document.getElementsByTagName("img")[0];//都打该页面的第一个图片标签的DOM对象 alert(img.getAttribute("title")); } </script> </head> <body οnlοad="property()"> <img title="情人坡" src="file:///D|/我的文档/My Pictures/Sunset.jpg"/> </body> </html> <script type="text/javascript"> /*创建新节点*/ function createP(){ var newP=document.createElement("p"); var text=document.createTextNode("这是一段感人的故事!"); newP.appendChild(text); document.body.appendChild(newP); } </script> </head> <body οnlοad="createP()"> <p>事先写一行文字在这里!</p> </body> </html> <script type="text/javascript"> /*InnerHTML点*/ function test(){ var mydiv=document.getElementById("mydiv"); alert(mydiv.innerHTML); mydiv.innerHTML="<span>你是小白!</span>" } </script> </head> <body οnlοad="test()"> <div id="mydiv"> 我是呆瓜! </div> </body> </html>