javascript - 在 JS 中交换 id - 这只能使用一次。为什么？

Question

我正在研究点击事件，我注意到这个函数只在第一次起作用。这是为什么？我该怎么做才能在两个元素之间连续交换 id？

而且，如果要在大量元素之间传递 id，方法是否会发生巨大变化？

我根本没有使用 jQuery。谢谢。

 window.onload = function() {
	document.addEventListener('click', function(e) {
	  document.getElementById("purpleSquare").id = 'redSquare';
	  document.getElementById("redSquare").id ="purpleSquare";
	})
};

#redSquare {
	background-color: red;
    width: 20px;
    height: 20px;
}
#purpleSquare {
	background-color: purple;
    width: 20px;
    height: 20px;
}

        <div id="redSquare"></div>

        <div id="purpleSquare"></div>

Answer 1

因为运行这段代码后...

document.getElementById("purpleSquare").id = 'redSquare';

...将有两个带有 id="redSquare" 的元素。

因此，这将是不可靠的:

document.getElementById("redSquare")

在DOM2和 DOM3行为未定义:

Behavior is not defined if more than one element has this ID.

在DOM4第一个元素将被返回。因此，您第一次单击它会起作用，因为您想获得第一个。但是当你再次点击时，你想要得到第二个，所以它不起作用。

相反，您可以在更改元素 ID 之前将元素存储在变量中。

var el1 = document.getElementById("purpleSquare"),
    el2 = document.getElementById("redSquare");
el1.id = 'redSquare';
el2.id ="purpleSquare";

document.addEventListener('click', function(e) {
  var el1 = document.getElementById("purpleSquare"),
      el2 = document.getElementById("redSquare");
  el1.id = 'redSquare';
  el2.id ="purpleSquare";
})

#redSquare {
  background-color: red;
  width: 20px;
  height: 20px;
}
#purpleSquare {
  background-color: purple;
  width: 20px;
  height: 20px;
}

<div id="redSquare"></div>
<div id="purpleSquare"></div>