为什么循环的document.GetElementsByClassName（）缺少某些元素？

Question

为什么我的函数不能一次更改具有特定名称的每个类？我想将白天或夜晚模式作为按钮，可以将所有“暗”类元素更改为“亮”等。它仅在我多次按下按钮时才起作用，好像我的for循环正在计时较短，因为我正在使用元素的长度来停止，并且该长度可能在for循环中正在减小，从而缩短了？如果是这样，我该如何解决这个问题？

我启用了该网站，因此您可以看到问题并检查我的代码。 https://angry-euclid-939cdc.netlify.com/templates/page2.html

这是代码：

function AllDay(){
    var night = document.getElementById("night");
    if(night){
        night.innerHTML = "Day";
        console.log(night);
        night.id= "day";
        console.log("changing night to day")
    }
    var stuff = document.getElementsByClassName("dark");
    if(stuff){
        for(var i= 0; i < 10; i++){
            if(stuff[i]){
                stuff[i].className = "light";
            }
        }
    }
}

function AllNight(){
    var day = document.getElementById("day");
    if(day){
        day.innerHTML = "Night";
        day.id = "night";
        console.log("changing day to night");
    }
    var stuff = document.getElementsByClassName("light");
    if(stuff){
        for(var i= 0; i < 10; i++){
            if(stuff[i]){
                stuff[i].className = "dark";
            }
        }
    }
}

.dark{
    background-color: darkgray;
}
.light{
    background-color: lightblue;
    font-size: 3ch;
}
#higher{
    height:400px;
    border: 1ch solid rosybrown;
}


#middle{
    padding:5rem;
}
#upper{
    text-align: right;
}
.inline{
    display: inline-block;
}

<div id="rapper">
        <div id="night">Night</div>
        <div id="upper">
            <div class="inline">In-line</div>
            <div class="inline">In-line</div>
           <div class="inline"><button onclick="AllDay()">All Day</button></div>
            <div class="inline"><button onclick="AllNight()">All Night</button></div>

        </div>
        <div id="higher" class="dark">
            <p>Higher?</p>
        </div>
        <div id="middle1" class="dark">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nemo, sed eum ad, sequi eveniet ratione quibusdam atque omnis magni accusantium numquam iste illo, in soluta deserunt placeat deleniti. Inventore.</p>
        </div>
        <div id="lower1" class="dark">
            <p>Lorem ipsum aslkdf;</p>
        </div>
        <div id="lower2" class="dark">
                <p>Lorem ipsum aslkdf;</p>
        </div>
        <div id="lower3" class="dark">
                <p>Lorem ipsum aslkdf;</p>
        </div>
        <div id="middle2" class="dark">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nemo, sed eum ad, sequi eveniet ratione quibusdam atque omnis magni accusantium numquam iste illo, in soluta deserunt placeat deleniti. Inventore.</p>
            </div>
            <div id="lower4" class="dark">
                <p>Lorem ipsum aslkdf;</p>
            </div>
            <div id="lower5" class="dark">
                    <p>Lorem ipsum aslkdf;</p>
            </div>
            <div id="lower6" class="dark">
                    <p>Lorem ipsum aslkdf;</p>
            </div>
    </div>

感谢偷窥。

Answer 1

首先，为同一页面上的多个元素设置相同的ID是错误的。您可以使用querySelectorAll代替getElementsByClassName。请查看下面提供的代码：

function AllDay(){
        var stuff = document.querySelectorAll(".dark");
        if(stuff){
            for (var i = 0; i < stuff.length; i++){
                    stuff[i].className = "light";
                
            }
        }
    }

    function AllNight(){
        var stuff = document.querySelectorAll(".light");
         if (stuff) {
            for (var i = 0; i < stuff.length; i++){
                 stuff[i].className = "dark";
            }
        }
    }

.dark{
    background-color: darkgray;
}
.light{
    background-color: lightblue;
    font-size: 3ch;
}
#higher{
    height:400px;
    border: 1ch solid rosybrown;
}


#middle{
    padding:5rem;
}
#upper{
    text-align: right;
}
.inline{
    display: inline-block;
}

<div id="rapper">
        <div id="night">Night</div>
        <div id="upper">
            <div class="inline">In-line</div>
            <div class="inline">In-line</div>
           <div class="inline"><button onclick="AllDay()">All Day</button></div>
            <div class="inline"><button onclick="AllNight()">All Night</button></div>

        </div>
        <div id="higher" class="dark">
            <p>Higher?</p>
        </div>
        <div id="middle1" class="dark">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nemo, sed eum ad, sequi eveniet ratione quibusdam atque omnis magni accusantium numquam iste illo, in soluta deserunt placeat deleniti. Inventore.</p>
        </div>
        <div id="lower1" class="dark">
            <p>Lorem ipsum aslkdf;</p>
        </div>
        <div id="lower2" class="dark">
                <p>Lorem ipsum aslkdf;</p>
        </div>
        <div id="lower3" class="dark">
                <p>Lorem ipsum aslkdf;</p>
        </div>
        <div id="middle2" class="dark">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae nemo, sed eum ad, sequi eveniet ratione quibusdam atque omnis magni accusantium numquam iste illo, in soluta deserunt placeat deleniti. Inventore.</p>
            </div>
            <div id="lower4" class="dark">
                <p>Lorem ipsum aslkdf;</p>
            </div>
            <div id="lower5" class="dark">
                    <p>Lorem ipsum aslkdf;</p>
            </div>
            <div id="lower6" class="dark">
                    <p>Lorem ipsum aslkdf;</p>
            </div>
    </div>