华恩JAVA班第54天
<!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>使用getAttribute读取节点的属性值</title> <style type="text/css"> img{ border: 0px; float: left; padding:3px; } body{ margin:0px; font-size:12px; line-height:20px; } input{ margin-top: 5px; } </style> <script type="text/javascript"> function hh(){ var hText=document.getElementByIdx_x("fruit").getAttribute("src"); alert("图片的路径是："+hText) } function check(){ var favor=document.getElementsByName("enjoy"); var like="你喜欢的水果是："; for(var i=0;i<favor.length;i++){ if(favor[i].checked==true){ like+="\n"+favor[i].getAttribute("value"); } } alert(like); } function change(){ var imgs=document.getElementsByTagName_r("img"); imgs[0].setAttribute("src","images/grape.jpg"); } </script> </head>
<body> <img src="images/fruit.jpg" alt="水果图片" id="fruit" /> <h1 id="love">选择你喜欢的水果：</h1> <input name="enjoy" type="checkbox" value="apple" />苹果 <input name="enjoy" type="checkbox" value="banana" />香蕉 <input name="enjoy" type="checkbox" value="grape" />葡萄 <input name="enjoy" type="checkbox" value="pear" />梨 <input name="enjoy" type="checkbox" value="watermelon" />西瓜 <br /> <input name="btn" type="button" value="显示图片路径" οnclick="hh()" /> <br /><input name="btn" type="button" value="喜欢的水果" οnclick="check()" /> <br /><input name="btn" type="button" value="改变图片" οnclick="change()" /> </body> </html> <!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>根据层次关系查找节点</title> <style type="text/css"> td{ font-size:14px; width:80px; height:30px; text-align:center; border-bottom:1px solid #666; border-right:1px solid #666; } table{ border-left:1px solid #666; border-top:1px solid #666; } body{text-align:center;} input{margin-top:5px;} </style> <script type="text/javascript"> function checks(){ var tt=document.getElementByIdx_x("myTable"); var s=tt.lastChild.firstChild.firstChild.innerHTML; alert(s); } </script> </head> <body><table border="0" cellspacing="0" cellpadding="0" id="myTable"> <thead> <td>姓名</td> <td>课程</td> <td>成绩</td> </thead> <tbody> <tr> <td>欧阳兰</td> <td>语文</td> <td>88</td> </tr> <tr> <td>白杨</td> <td>数学</td> <td>96</td> </tr> </tbody> </table> <input name="btn" type="button" value="第二行第一个单元格内容" οnclick="checks()" /> </body> </html>
<!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>增加节点</title> <script type="text/javascript"> function newNode(){ var oldNode=document.getElementByIdx_x("sixty1"); //访问插入节点的位置 var image=document_createElement_x("img"); //创建一个图片节点 image.setAttribute("src","images/newimg.jpg"); //设置图片路径
document.body.insertBefore(image,oldNode); //插入图片到sixty1前面 } function copyNode(){ var image=document.getElementByIdx_x("sixty1"); //访问复制的节点 var copyImage=image.cloneNode(false); //复制指定的节点 document.body.a(copyImage); //在页面最后增加节点 } </script> </head>
<body> <h2>喜欢的水果</h2> <input id="b1" type="button" value="增加一幅图片" οnclick="newNode()" /> <input id="b2" type="button" value="复制原图" οnclick="copyNode()" /><br /> <img src="images/sixty1.jpg" id="sixty1" alt="水果" /> <img src="images/sixty2.jpg" id="sixty2" alt="果篮" /> </body> </html>
<!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>删除节点</title> <script type="text/javascript"> function delNode(){ var dNode=document.getElementByIdx_x("sixty1"); //访问被删除的节点 document.body.removeChild(dNode); //删除图片 } function repNode(){ var oldimage=document.getElementByIdx_x("sixty2"); //访问被替换的节点 var newimage=document_createElement_x("img"); //创建一个图片节点 newimage.setAttribute("src","images/repimg.jpg"); //设置图片路径 document.body.replaceChild(newimage,oldimage); //替换原来的图片 } </script> </head>
<body> <h2>喜欢的水果</h2> <input id="b1" type="button" value="删除图片" οnclick="delNode()" /> <input id="b2" type="button" value="替换图片" οnclick="repNode()" /><br /> <img src="images/sixty1.jpg" id="sixty1" alt="水果" /> <img src="images/sixty2.jpg" id="sixty2" alt="果篮" /> </body> </html>
更多信息可以参见同学富晓磊的博客:http://blog.sina.com.cn/u/1798827371
