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在控制台内混淆）。尽管我是在代码结尾处插入的？

- Biswajit Biswas

---

@JaromandaX 您之前的评论（var x = {}; console.log(x); x.a=1;）让我很困惑。 我以为@kei是正确的（执行和调用console.log之间有时间差）。 - Biswajit Biswas

@Kei - 我使用火狐浏览器，所以看起来一点也不混乱。 - Jaromanda X

@JaromandaX，你能给我解释一下吗？ - Biswajit Biswas

@BiswajitBiswas - 我已经尽力解释了，再多的解释也无法更清楚了。 - Jaromanda X

@Kei - 在我的 Chrome 浏览器中，它记录了 <h1>...</h1>。 - Jaromanda X

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变量是用于存储数据值的容器。 你看，变量只是用来存储数据的容器。在h1.innerText ='Inserted';这一行出现之前，它们具有您预期的内容，但当该行运行时，它们的内容会更改，并且您会观察到您正在观察的内容。问题在于，这个过程发生得非常快，以至于您看不到h1和h11的第一个版本，只能看到它们的更新版本，因为实际上它们只是用于存储数据的容器，而不是数据本身，或者您可以将它们称为存储位置的名称。

- Nsoseka