使用JS访问Bootstrap 5按钮时getElementsByName取元素返回undefined问题

你的问题核心是脚本执行时机过早：放在头部的脚本会在浏览器解析<body>里的div之前就运行，此时document.getElementsByName("test")返回的是空的HTMLCollection，取索引[0]自然得到undefined。你看到“不添加索引能得到包含按钮的列表”，应该是DOM加载完成后（比如手动在控制台输入代码）的结果，和脚本执行时的状态不一样。

解决方法 #

• 把脚本移到body末尾
  让脚本在DOM元素加载完成后再执行：

  <body>
    <div name="test" class="btn bg-secondary">bestanden?</div>
    <script>
      console.log(document.getElementsByName("test")[0]); // 正常获取元素
    </script>
  </body>
  

• 监听DOM加载完成事件
  如果脚本必须放在头部，通过DOMContentLoaded事件确保DOM就绪后再执行代码：

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const btn = document.getElementsByName("test")[0];
      console.log(btn);
      // 这里可以设置禁用相关的样式或属性
      btn.style.pointerEvents = 'none';
      btn.classList.add('opacity-50');
    });
  </script>
  <body>
    <div name="test" class="btn bg-secondary">bestanden?</div>
  </body>
  

• 改用querySelector简化获取
  可以直接用querySelector获取第一个匹配的元素，同样注意执行时机：

  // 放在DOMContentLoaded回调里
  const btn = document.querySelector('[name="test"]');
  

补充：div模拟按钮的禁用处理 #

div本身没有原生的disabled属性，要实现禁用效果，建议添加样式模拟：

• pointer-events: none：阻止鼠标交互
• opacity-50：Bootstrap的半透明类，模拟禁用视觉效果

内容的提问来源于stack exchange，提问作者Aayhan