- <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>
DOM的一些小示例
最新推荐文章于 2024-08-29 14:33:40 发布