实际上JavaScript在这里做了什么

Question

样品：

document.getElementById('p').addEventListener('click', function() {
  this.textContent = 'Hello';
});

<p id="p">Hello</p>

看起来很清楚，但我想知道点击元素后会发生什么：

• JavaScript会删除元素默认文本内容，并将其设置为Hello。
• 它将旧的Hello替换为新的Hello。
• 绝对没有。

Answer 1

用新的hello替换旧的hello。

详细地说，代码用id = p替换了具有指定文本的元素的 文本 内容。请注意，这只是文本 - 如果要注入HTML代码，请改用innerHTML。

如果您将替换文本替换为其他内容，则可以最清楚地看到，例如：

document.getElementById('p').onclick = function() {
  this.textContent = 'Bob';
};

这是一个jsFiddle，展示了会发生什么：

https://jsfiddle.net/3smrzxw5/

Answer 2

textContent是DOM中的API。在您的示例中，它将替换在onclick函数内分配给textContent的任何文本。

如果问题是关于解析器实际做了什么，那将取决于实现。与性能改进一样，如果内容相同，解析器可能不会替换该值。

Answer 3

尝试使用此代码，您可以理解它：

<p id="p">Hello</p>
document.getElementById('p').onclick = function() {
  this.textContent = 'hii';
};

实际上，当您点击文字时，它会替换内容。