為什么對變量執行操作會影響 Vanilla JS 中的 DOM？

Question

如果我想將 append 一些 HTML （在這種情況下為<p>標簽）添加到 Vanilla JS 中的一個元素，那么看來我必須這樣做：

const $Element = document.getElementById("ElementID");
$Element.insertAdjacentHTML("afterbegin", "<p></p>");

這很好用，但我不明白的是，如果我在$Element變量中存儲對#ElementID的引用，為什么操作變量會導致 DOM 更新？

假設我想對$Element進行許多更改，例如首先添加一個<h1>標簽，然后添加一個<h2>和多個<p>標簽。 我希望所有這些都先完成，然后讓 JS 更新 DOM，而不是實時更新。 這在 Vanilla JS 中是否可行？

Answer 1

我在 $Element 變量中存儲了對#ElementID 的引用，為什么操作該變量會導致 DOM 更新？

因為這就是引用的工作方式。 您可以在任意數量的變量中放置相同的引用，您仍然只有一個 object，如果您修改該 object，“指向”該引用的其他變量將反映這些更改，因為它們都是相同 ZA8CFDE6331BD49EB2AC96F891 的句柄在 memory 中。

如果要批量更改，請創建一個新的 DOM 元素，准備它，然后將其添加到 DOM。

Answer 2

要完成您要查找的內容，您始終可以使用cloneNode克隆要更改的元素，進行更改，然后在 dom 中將其替換為元素父級上的replaceChild 。

 var elem = document.querySelector('#target'); var clone = elem.cloneNode(true); clone.innerHTML = "TeST"; clone.style.backgroundColor = "red"; elem.parentNode.replaceChild(clone, elem);

 <div id="target"></div>