1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>2019/03/20作业</title> 6 <script src="js/hw.js" type="text/javascript" charset="utf-8"></script> 7 <style type="text/css"> 8 .btn{ 9 background-color: skyblue; 10 color: white; 11 } 12 </style> 13 </head> 14 <body> 15 <input type="button" name="btn1" id="btn1" value="第一题" /> 16 <input type="button" name="btn2" id="btn2" value="第二题" /> 17 <input type="button" name="btn3" id="btn3" value="第三题a" /> 18 <input type="button" name="btn4" id="btn4" value="第三题b" /> 19 <div id = "div1"> 20 <h1 name="title1">div1的标题1</h1> 21 <a href="http://www.baidu.com"></a> 22 <p>div1中的内容</p> 23 <form action="#" id="form1" method="post"> 24 <input type="radio" name="confirm" value="Yes" />是 25 <input type="radio" name="confirm" value="No" />否 26 <input type="submit" class="btn" value="提交"/> 27 </form> 28 29 </div> 30 <div id="div2"> 31 <h1 name="title2">div2的标题1</h1> 32 <p>div2中的内容</p> 33 <form action="#" id="form2" method="post"> 34 <input type="button" class="btn" value="按钮" /> 35 <input type="submit" class="btn" value="提交"/> 36 </form> 37 </div> 38 </body> 39 </html>
1 window.onload = function(){ 2 //第一题开始:获取Document对象的两个子节点，并且打印输出它们的节点类型和节点名称，直接获取body元素。 3 var b1 = document.getElementById("btn1"); 4 b1.onclick=function(){ 5 var cNodes = document.childNodes; 6 for(var i=0;i<cNodes.length;i++){ 7 alert("文档节点的子节点的NodeType是"+cNodes.item(i).nodeType); 8 alert("文档节点的子节点的NodeName是"+cNodes[i].nodeName); 9 } 10 //直接获取body元素 11 var boy = document.body; 12 alert(boy.nodeName); 13 } 14 //第一题结束 15 //第二题开始:写出当前文档信息：标题，完整URL和域名 16 var b2=document.getElementById("btn2"); 17 b2.onclick=function(){ 18 var title1=document.title; 19 alert(title1); 20 var url1=document.URL; 21 alert(url1); 22 var yuming=document.domain; 23 alert(yuming); 24 } 25 //第二题结束 26 //第三题开始 27 //a:通过id获取div2的节点，并输出它的id（innerHTML） 28 var b3=document.getElementById("btn3"); 29 b3.onclick=function(){ 30 var dv2=document.getElementById("div2"); 31 alert(dv2.innerHTML); 32 } 33 //b)通过tagName获取文档中所有h1标签，并循环显示它的内容。并且通过name的名称，找到name为title1的h1标签，打印它的内容。 34 var b4=document.getElementById("btn4"); 35 b4.onclick=function(){ 36 var tagb=document.getElementsByTagName("h1"); 37 for(i=0;i<tagb.length;i++){ 38 alert(tagb[i].innerHTML); 39 } 40 var h1name=tagb.namedItem("title1"); 41 alert(h1name.innerHTML); 42 } 43 //c)通过Name获取名称相同的单选按钮，并循环打印单选按钮的value。 44 var bt=document.getElementsByName("confirm"); 45 for (var i=0;i<confirm.length;i++){ 46 alert(confirm.item(i).value); 47 } 48 //d)直接获取文档中所有的form表单，并打印表单的id。获取所有a链接，并打印a链接的href 49 var forms=document.forms; 50 for(i=0;i<forms.length;i++){ 51 alert(forms[i].id); 52 } 53 var links=document.links; 54 for(i=0;i<links.length;i++){ 55 alert(links.item(i).href); 56 } 57 //第三题结束 58 }