JS....document对象学习

原创已于 2022-02-23 17:03:01 修改 · 283 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #前端

于 2019-10-10 21:14:35 首次发布

前端专栏收录该内容

45 篇文章

订阅专栏

本文详细介绍了如何使用document对象来获取HTML元素，包括直接和间接获取方式，如通过ID、name、标签名、class属性以及利用元素间的关系进行选择。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>document对象学习</title>
      <!--
         document对象学习:
            1、document对象的概念
               浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息。
            2、使用document
               获取HTML元素对象
                  直接获取方式：
                     通过id
                     通过name属性值
                     通过标签名
                     通过class属性值
                  间接获取方式：
                     父子关系
                     子父关系
                     兄弟关系
      -->
      <!--声明js代码域-->
      <script type="text/javascript">
            //document获取元素对象
               //直接方式
                  //id方式
                  function testGetEleById(){
                     var inp=window.document.getElementById("uname");
                     alert(inp);
                  }  
                  //name方式
                  function testGetEleByName(){
                     var favs=document.getElementsByName("fav");
                     alert(favs);
                  }  
                  //标签名
                  function testGetEleByTagName(){
                     var inps=document.getElementsByTagName("input");
                     alert(inps);
                  }
                  //class属性
                  function testGetEleByClassName(){
                     var inps=document.getElementsByClassName("common");
                     alert(inps.length);
                  }
               //间接获取方式
                  //父子关系
                     function testParent(){
                        //获取父级元素对象
                        var showdiv=document.getElementById("showdiv");
                        //获取所有的子元素对象数组
                        var childs=showdiv.childNodes;
                        alert(childs.length);
                     }
                  //子父关系
                     function testChild(){
                        //获取子元素对象
                           var inp=document.getElementById("inp");
                           var div=inp.parentNode;
                           alert(div);
                     }
                  //兄弟关系
                     function testBrother(){
                        
                           var inp=document.getElementById("inp");
                           var preEle= inp.previousSibling;//弟获取兄
                           var nextEle=inp.nextSibling;//兄获取弟
                           alert(preEle+":::"+nextEle);
                        
                     }
                  
      </script>
      <style type="text/css">
         .common{}
         #showdiv{
            border: solid 2px orange;
            width: 300px;
            height: 300px;
         }
      </style>
   </head>
   <body>
      <h3>document对象的概念和获取元素对象学习</h3>
      直接获取方式学习：<br />
      <input type="button" name="" id="" value="测试获取HTML元素对象--id" onclick="testGetEleById()" />
      <input type="button" name="" id="" value="测试获取HTML元素对象---name" onclick="testGetEleByName()" />
      <input type="button" name="" id="" value="测试获取HTML元素对象---TagName" onclick="testGetEleByTagName()" />
      <input type="button" name="" id="" value="测试获取HTML元素对象---className" onclick="testGetEleByClassName()" />
      <hr />
         用户名：<input type="text" name="uname" id="uname" value="" /><br /><br />
         <input type="checkbox" name="fav" id="fav" value="" class="common"/>唱歌
         <input type="checkbox" name="fav" id="fav" value="" class="common"/>跳舞
         <input type="checkbox" name="fav" id="fav" value="" />睡觉
         <input type="checkbox" name="fav" id="fav" value="" />打游戏
      <hr />
      间接获取方式学习：<br />
      <input type="button" name="" id="" value="测试父子关系"  onclick="testParent()"/>
      <input type="button" name="" id="" value="测试子父关系"  onclick="testChild()"/>
      <input type="button" name="" id="" value="测试兄弟关系"  onclick="testBrother()"/>
      <hr />
      <div id="showdiv"><input type="" name="" id="" value="" /><input type="" name="" id="inp" value="" />
         <input type="" name="" id="" value="" />
         <input type="" name="" id="" value="" />
         <input type="" name="" id="" value="" />
         <input type="" name="" id="" value="" />
      </div>
   </body>
</html>