在以下情况下，当我将 class 与 JavaScript 交换时，为什么替换命令的顺序很重要？

Question

我通过交换 classes 来交换两个容器的颜色。为此，我使用了一个调用函数 swap().

的按钮

只要我先交换绿色容器的 class 就一切正常。但是当我颠倒顺序并从绿色按钮开始时，颜色不会交换，而是保持原样（请参阅下面我的源代码中的评论）。

如果有人能帮助我理解这种行为，我将不胜感激。由于我将这两个元素存储在两个不同的变量（greenElement 和 redElement）中，我希望我不必保持一定的顺序。

为什么顺序很重要？

function swap(){
var greenElement = document.getElementsByClassName("greenClass");
var redElement = document.getElementsByClassName("redClass");

redElement[0].classList.replace("redClass", "greenClass");
greenElement[0].classList.replace("greenClass", "redClass");

// IN THIS ORDER IT DOESN'T WORK
// greenElement[0].classList.replace("greenClass", "redClass");
// redElement[0].classList.replace("redClass", "greenClass");
}

.greenClass{
background:green;
}

.redClass{
background:red;
}

<div class="greenClass">green</div>
<div class="redClass">red</div>
<button type="button" onclick="swap()">click</button>

正如您在评论中看到的，我替换 classes 的顺序很重要。

Answer 1

正如@charlietfl 所解释的那样，getElementsByClassName returns 一场直播 collection。

让我们采用第一种方法，

您的 HTML 最初看起来像这样，

<div class="greenClass">green</div>
<div class="redClass">red</div>

现在，当下面的语句被执行时，

var greenElement = document.getElementsByClassName("greenClass");
var redElement = document.getElementsByClassName("redClass");

<div class="greenClass">green</div> // Represents greenElement[0]
<div class="redClass">red</div> // Represents redElement[0]

这条语句执行后，

redElement[0].classList.replace("redClass", "greenClass");

<div class="greenClass">green</div> // Represents greenElement[0]
<div class="greenClass">red</div> // Represents greenElement[1]

注意，greenElement 和 redElement 这两个数组是如何实时更新的，greenElement 现在有 2 个元素，而 redElement 有 0 个元素。

这条语句执行后，

greenElement[0].classList.replace("greenClass", "redClass");

<div class="redClass">green</div> // Represents redElement[0]
<div class="greenClass">red</div> // Represents greenElement[0]

现在，让我们看看第二种方法，

您的 HTML 最初看起来像这样，

<div class="greenClass">green</div>
<div class="redClass">red</div>

现在，当下面的语句被执行时，

var greenElement = document.getElementsByClassName("greenClass");
var redElement = document.getElementsByClassName("redClass");

<div class="greenClass">green</div> // Represents greenElement[0]
<div class="redClass">red</div> // Represents redElement[0]

这条语句执行后，

greenElement[0].classList.replace("greenClass", "redClass");

<div class="redClass">green</div> // Represents redElement[0]
<div class="redClass">red</div> // Represents redElement[1]

注意，greenElement 和 redElements 这两个数组是如何实时更新的，greenElement 现在有 0 个元素，而 redElement 有 2 个元素。

这条语句执行后，

redElement[0].classList.replace("redClass", "greenClass");

<div class="greenClass">green</div> // Represents greenElement[0]
<div class="redClass">red</div> // Represents redElement[1]

希望，这可以帮助您理解。

在以下情况下，当我将 class 与 JavaScript 交换时，为什么替换命令的顺序很重要？

Why does the order of the replace-command matter when I swap a class with JavaScript in the following case?

javascript

css

replace

class

getelementsbyclassname