DOM获取页面的元素

最新推荐文章于 2023-02-24 10:01:36 发布

Hell丶Caesar

最新推荐文章于 2023-02-24 10:01:36 发布

阅读量275

点赞数

本文链接：https://blog.csdn.net/qq_41985556/article/details/80486792

版权

通过DOM获取页面的元素的三种方式

1. getElementById( )方法访问DOM元素 —》 id获取一个元素

2. getElementsByName( )方法访问DOM元素—》元素的name属性名获取(数组)

3. getElementsByTagName( )方法访问DOM元素 –》元素的名称获取(数组)

4. getElementsByClassName()方法访问DOM元素 –》类样式名称获取(数组)

代码演示：

<script>
        //onload事件 会等body的内容加载完后再执行 load()函数
      function  load(){
          //根据id获取
          var bookname=document.getElementById("book").innerHTML;
          alert(bookname);
          //根据name属性获取--》(数组)
          var seasons=  document.getElementsByName("season");
          //创建变量
          var ss="";
          for(var i=0;i<seasons.length;i++){
              ss+=seasons[i].value;
          }
          document.getElementById("content").innerHTML=ss;
          //根据标签名获取
          var contentes="";
       var inputs=   document.getElementsByTagName("input");
          for(var i=0;i<inputs.length;i++){
              contentes+=inputs[i].value;
          }
      //  document.getElementById("cc").innerHTML="<h1>"+contentes+"</h1>";
          document.getElementById("cc").innerText="<h1>"+contentes+"</h1>"
      }


    </script>
</head>
<body οnlοad="load();">
<div class="content">
    <img src="images/book.jpg" alt="岛上书店"/>
    <div class="r">
        <div id="book">书名：岛上书店</div>
        <input name="changeBook" value="换换名称" type="button" οnclick="alterBook();" /><br>
        四季名称：
        <input name="season" type="text" value="春" />
        <input name="season" type="text" value="夏" />
        <input name="season" type="text" value="秋" />
        <input name="season" type="text" value="冬" /><br><br>
        <input name="b2" type="button" value="input内容" οnclick= "all_input()" />
        <input name="b3" type="button" value="四季名称" οnclick="s_input()" />
        <input name="b4" type="button" value="清空页面内容" οnclick="clearAll()" />
        <p id="replace"></p>
    </div>
</div>
<div id="content"></div>
<div id="cc"></div>
</body>

Hell丶Caesar

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM获取页面的元素

通过DOM获取页面的元素的三种方式1. getElementById( )方法访问DOM元素 —》 id获取一个元素2. getElementsByName( )方法访问DOM元素—》元素的name属性名获取(数组)3. getElementsByTagName( )方法访问DOM元素 –》元素的名称获取(数组)4. getElementsByClassName()方法访问DOM元素 –》类样...
复制链接

扫一扫