当 class 存在于 HTML 中时，document.getElementsByClassName 创建空数组

Question

我正在关注位于 here 的 HTML/CSS/Javascript 中关于创建幻灯片的 W3Schools 教程。在 HTML 代码中，我在 mySlides class 中创建了几个元素；但是，当我调用 document.getElementsByClassName("mySlides") 时，我得到一个空数组。

这是 mySlides class 中元素的一些 HTML 代码：

<div class="mySlides fade">
    <div id="intro">
        <p>Click to Start!</p>
        <button type="button" id="startButton" onclick="start()">Start!</button>
    </div>
</div>

这是 Javascript 代码，我在其中访问 mySlides 元素：

var slides = document.getElementsByClassName("mySlides");
console.log(slides.length); // prints "0"
console.log(slides[0]); // prints "undefined"

关于为什么 document.getElementsByClassName("mySlides") 无法访问 mySlides 元素的任何想法？谢谢你的帮助。

Answer 1

执行您的脚本时，DOM 可能未完全加载。要么将脚本标记放在 DOM 元素之后，要么为 DOMContentLoaded 添加事件侦听器以在其中执行您的函数。

为 DOMContentLoaded 添加事件侦听器：

document.addEventListener("DOMContentLoaded", function(e){
  var slides = document.getElementsByClassName("mySlides");
console.log(slides.length); 
console.log(slides[0]); 
});

<div class="mySlides fade">
    <div id="intro">
        <p>Click to Start!</p>
        <button type="button" id="startButton" onclick="start()">Start!</button>
    </div>
</div>

由于 HTML 文档是从上到下解析的，将 script 标记放在 DOM 元素之后将允许它在元素成功加载到文档中后执行。

 <div class="mySlides fade">
        <div id="intro">
            <p>Click to Start!</p>
            <button type="button" id="startButton" onclick="start()">Start!</button>
        </div>
    </div>
 <script>
 document.addEventListener("DOMContentLoaded", function(e){
      var slides = document.getElementsByClassName("mySlides");
    console.log(slides.length); 
    console.log(slides[0]); 
    });
 </script>

您可以使用 jQuery 的 $(document).ready() 来确保所有 DOM 元素都已加载。

 $(document).ready(function(){
          var slides = document.getElementsByClassName("mySlides");
        console.log(slides.length); 
        console.log(slides[0]); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mySlides fade">
            <div id="intro">
                <p>Click to Start!</p>
                <button type="button" id="startButton" onclick="start()">Start!</button>
            </div>
        </div>

Answer 2

执行脚本时，HTML 文档可能尚未准备就绪。如果是这样，您必须在 DOMContentLoaded.

之后执行代码

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

document.addEventListener("DOMContentLoaded", function(event) {
  var slides = document.getElementsByClassName("mySlides");
  console.log(slides.length);
  console.log(slides[0]);
});

<div class="mySlides fade">
    <div id="intro">
        <p>Click to Start!</p>
        <button type="button" id="startButton" onclick="start()">Start!</button>
    </div>
</div>

当 class 存在于 HTML 中时，document.getElementsByClassName 创建空数组

document.getElementsByClassName creates null array when the class exists in HTML

html

javascript

css

getelementsbytagname

getelementsbyclassname