JavaScript DOM

最新推荐文章于 2025-07-07 19:35:11 发布

原创最新推荐文章于 2025-07-07 19:35:11 发布 · 294 阅读

CC 4.0 BY-SA版权

本文介绍了通过DOM获取网页元素的方法，包括使用getElementById(), getElementsByName(), getElementsByTagName(), 和getElementsByClassName()四种方式，并通过示例代码展示了如何利用这些方法访问不同类型的页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1 DOM获取页面的元素

1. getElement系列访问

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

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

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

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

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 onload="load();">
<div class="content">
    <img src="images/book.jpg" alt="岛上书店"/>
    <div class="r">
        <div id="book">书名：岛上书店</div>
        <input name="changeBook" value="换换名称" type="button" onclick="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内容" onclick= "all_input()" />
        <input name="b3" type="button" value="四季名称" onclick="s_input()" />
        <input name="b4" type="button" value="清空页面内容" onclick="clearAll()" />
        <p id="replace"></p>
    </div>
</div>
<div id="content"></div>
<div id="cc"></div>
</body>