DOM元素的获取

最新推荐文章于 2025-07-02 18:07:29 发布

九木德员工

最新推荐文章于 2025-07-02 18:07:29 发布

阅读量315

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43694639/article/details/86774364

本文详细介绍了四种DOM元素获取方法：getElementsByClassName、getElementById、getElementsByName和getElementsByTagName，包括它们的特点和使用场景。

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

DOM是文档对象模型(Document Odject Model)的简称。
dom元素获取
1.dom元素获取方式1：
getElementsByClassName获取出来的对象是集合类型也可以说是数组类型，class可以绑定多个元素。获取出来是集合类型 ,就有长度属性 length 代表长度.

<body>
<button class="btn">按钮1</button>
  <button class="btn">按钮1</button>
    <script>
   var btn=document.getElementsByClassName("btn");  /!*获取到了网页里面的按钮*!/
      //获取到单个元素之后操作元素
      /!*innerHTML  元素的html内容*!/
      /!*btn.innerHTML="按钮"; *!/  //这样写不行    原因js里面不能进行隐式迭代（不能操作一堆）
     /!* btn[0].innerHTML="按钮";
      btn[1].innerHTML="按钮"*!/
      for(var i=0;i<btn.length;i++)
      {
        btn[i].innerHTML="按钮";
      }
      </script>
      </body>

2.dom元素获取方式2：
getElementById 获取是唯一元素

<body>
  <button id="btninfo">按钮1</button>
<script>
   var btn=document.getElementById("btninfo");
      btn.innerHTML="注册";
       </script>
      </body>

3.dom元素获取方式3:
getElementsByName 通过元素的name名称获取

<body>
    <button name="btn">button</button>
  <script>
     var btn=document.getElementsByName("btn");
      console.log(btn[0]);
       </script>
      </body>

4.dom 元素获取方式4：
getElementsByTagName 元素的名称

<body>
    <button name="btn">注册</button>
    <button name="btn">提交</button>
  <script>
      var btn=document.getElementsByTagName("button");
      console.log(btn);
      var btn=document.body.getElementsByTagName("button");
      console.log(btn);
  </script>
</body>

(在获取元素的时候得注意获取的元素是否初始化)