document对象获取例子

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>2019/03/20作业</title>

         <script src="js/hw.js" type="text/javascript" charset="utf-8"></script>

         <style type="text/css">

             .btn{

                 background-color: skyblue;

                 color: white;

             }

         </style>

     </head>

     <body>

         <input type="button" name="btn1" id="btn1" value="第一题" />

         <input type="button" name="btn2" id="btn2" value="第二题" />

         <input type="button" name="btn3" id="btn3" value="第三题a" />

         <input type="button" name="btn4" id="btn4" value="第三题b" />

         <div id = "div1">

             <h1 name="title1">div1的标题1</h1>

             <a href="http://www.baidu.com"></a>

             <p>div1中的内容</p>

             <form action="#" id="form1" method="post">

                 <input type="radio" name="confirm"  value="Yes" />是

                 <input type="radio" name="confirm"  value="No" />否

                 <input type="submit" class="btn" value="提交"/>

             </form>

         </div>

         <div id="div2">

             <h1 name="title2">div2的标题1</h1>

             <p>div2中的内容</p>

             <form action="#" id="form2" method="post">

                 <input type="button" class="btn" value="按钮" />

                 <input type="submit" class="btn" value="提交"/>

             </form>

         </div>

     </body>

 </html>

.html部分

 window.onload = function(){

     //第一题开始:获取Document对象的两个子节点，并且打印输出它们的节点类型和节点名称，直接获取body元素。

     var b1 = document.getElementById("btn1");

     b1.onclick=function(){

         var cNodes = document.childNodes;

         for(var i=0;i<cNodes.length;i++){

             alert("文档节点的子节点的NodeType是"+cNodes.item(i).nodeType);

             alert("文档节点的子节点的NodeName是"+cNodes[i].nodeName);

         }

         //直接获取body元素

         var boy = document.body;

         alert(boy.nodeName);

     }

     //第一题结束

     //第二题开始:写出当前文档信息：标题，完整URL和域名

     var b2=document.getElementById("btn2");

     b2.onclick=function(){

         var title1=document.title;

         alert(title1);

         var url1=document.URL;

         alert(url1);

         var yuming=document.domain;

         alert(yuming);

     }

     //第二题结束

     //第三题开始

     //a:通过id获取div2的节点，并输出它的id（innerHTML）

     var b3=document.getElementById("btn3");

     b3.onclick=function(){

         var dv2=document.getElementById("div2");

         alert(dv2.innerHTML);

     }

     //b)通过tagName获取文档中所有h1标签，并循环显示它的内容。并且通过name的名称，找到name为title1的h1标签，打印它的内容。

     var b4=document.getElementById("btn4");

     b4.onclick=function(){

         var tagb=document.getElementsByTagName("h1");

         for(i=0;i<tagb.length;i++){

             alert(tagb[i].innerHTML);

         }

         var h1name=tagb.namedItem("title1");

         alert(h1name.innerHTML);

     }

     //c)通过Name获取名称相同的单选按钮，并循环打印单选按钮的value。

         var bt=document.getElementsByName("confirm");

         for (var i=0;i<confirm.length;i++){

             alert(confirm.item(i).value);

         }

     //d)直接获取文档中所有的form表单，并打印表单的id。获取所有a链接，并打印a链接的href

         var forms=document.forms;

         for(i=0;i<forms.length;i++){

             alert(forms[i].id);

         }

         var links=document.links;

         for(i=0;i<links.length;i++){

             alert(links.item(i).href);

         }

     //第三题结束

 }

秒客网

document对象获取例子

相关文章