JavaScript的document对象的学习

最新推荐文章于 2022-02-21 10:04:33 发布

原来是小柒

最新推荐文章于 2022-02-21 10:04:33 发布

阅读量210

点赞数

分类专栏：笔记 JavaScript 前端学习

本文链接：https://blog.csdn.net/qq_42711899/article/details/104182114

版权

本文详细介绍了JavaScript中document对象的使用，包括如何获取和操作HTML元素对象、属性、内容和样式，以及如何操作HTML文档结构和form表单。通过示例代码展示了如何通过id、name、标签名和class获取元素，以及如何修改元素的属性、内容和样式。此外，还讨论了增加和删除结点的方法以及form表单的常用操作。

摘要由CSDN通过智能技术生成

document的概念

浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存HTML文档的所有信息

使用document对象

获取HTML元素对象

直接获取：
①通过id方式

 function testGetElementById()
    {
      var inp=  window.document.getElementById("uname");
       alert(inp);
     }

②通过name属性值

 function testGetEleByName(){
              document.getElementsByName("fav");
              alert(davs.length);
          }

③通过标签名

  function testGetEleByTagName(){
               var inps=document.getElementsByTagName("input");
              alert(inps.length);
          }

④通过class属性

  function testGetEleByClassName(){
               var inps=document.getElementsByClassName("commmon");
              alert(inps.length);
          }

间接获取：
①父子关系
②子父关系
③兄弟关系

          //间接获取方式：
          //父子关系
          function testParent(){
              var showdiv=document.getElementById("showdiv");
              //获取所有元素对象数组
              var childs=showdiv.childNodes;
              alert=(childs.length);
          }
          //子父关系
          function testChlid(){
              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.nextElementSibling;
              alert(preEle+":::"+nextEle);
          }

测试代码：

 <style type="text/css">
                .common{}
                #showdiv{
                    border :solid 2px orange;
                    width:300px;
                    height:300px;
                }
                </style>

 <body>
        <h3>document对象的学习</h3>
        <input type="text"  name="uname" id="uname" value="测试获取html元素----id" onclick="testGetElementById();" />
        <input type="text"  name="uname" id="uname" value="测试获取html元素-----name" onclick="testGetElementByname();" />
        <input type="text"  name="uname" id="uname" value="测试获取html元素-----TagName" onclick="testGetEleByTagname();" />
         <input type="text"  name="uname" id="uname" value="测试获取html元素----className" onclick="testGetElementByClassId();" />
        <hr/>
         用户名：<input type="text" name=