与 javascript innerText 属性混淆

Question

我对 javascript innerText 属性感到困惑。它究竟是如何工作的？

  let h1 = document.querySelector('h1');
  console.log('Confused', h1);
  let h11 = document.querySelector('h1');
  console.log('Confused', h11);
  h1.innerText = 'Inserted';
  console.log('Got it', h1);

我可以理解 h1 和 h2 都包含相同的节点，这就是为什么在 h1 节点中插入文本会导致 h1 和 h11 都发生变化。
但我不明白为什么这个 h1 和 h11 都被插入到第 2 行和第 4 行（Markdown 在控制台中混淆）。虽然我在代码末尾插入了?

Answer 1

我想了解发生了什么，你可以使用这个插图运行您控制台中的此代码段

let h1 = document.querySelector('h1');
console.log('Confused', h1);
let h11 = document.querySelector('h1');
console.log('Confused', h11);
console.log('Got it', h1);

这没有 h1.innerText = 'Inserted'; 并观察 h1 和 h11 的值。

然后运行这个

h1.innerText = 'Inserted';

并在控制台中再次观察 h1 和 h11 的值。你会意识到它们已经更新为 innerText 相同的东西 Inserted.

现在运行这个

let h1 = document.querySelector('h1');
console.log('Confused', h1);
let h11 = document.querySelector('h1');
console.log('Confused', h11);
h1.innerText = 'Inserted';
console.log('Got it', h1);

观察最后的结果就是你运行宁h1.innerText = 'Inserted';后得到的结果现在发生了什么事？ JavaScript variables are containers for storing data values. 你看变量只是存储数据的容器。在 h1.innerText = 'Inserted'; 行出现之前，他们拥有您期望他们拥有的内容，但是当运行行出现时，他们的内容发生变化，您得到了您所观察到的内容。问题是这种情况发生得太快了，以至于你看不到 h1 和 h11 的第一个版本，只能看到它们的更新版本，因为实际上它们只是存储数据的容器，而不是数据本身，或者您可以将它们称为 the name of a storage location

与 javascript innerText 属性混淆

Confused with javascript innerText property

html

javascript

innertext

与 javascript innerText 属性 混淆

Confused with javascript innerText property

html

javascript

innertext

与 javascript innerText 属性混淆