Javascript直接访问dom元素并使用变量

Question

为什么要这样做

var consoleElem = document.getElementById("debug");
consoleElem.appendChild(msgElement)

与

相同

document.getElementById('debug').appendChild(msgElement);

在我看来，DOM元素（debug）是它自己的变量，然后将它复制到另一个变量意味着我有两个debug元素的副本...为什么我要对新副本进行任何更改（ var consoleElem）对原始DOM元素进行更改吗？

Answer 1

consoleElem中的内容不是DOM元素本身，而是对它的引用..所以通过引用完成的任何更改实际上都应用于DOM元素本身。

如果你想修改一个元素而不实际更改原始元素本身，那么你应该克隆它.jQuery提供克隆功能。

Answer 2

调用document.getElementById返回对DOM元素的引用。所有这一行

var consoleElem = document.getElementById("debug");

确实将该引用存储在变量中;它没有创造任何东西。你可以有十几个变量引用相同的元素，它仍然只是一个元素。

如果要创建元素，请使用document.createElement。如果要复制元素，请使用newElement = oldElement.cloneNode()。