Question

我甚至不确定我在这里问的是什么。我只知道这不是我的预期。

我有一个页面脚本（见下文），它通过ID来获取对元素的引用，然后在其上调用一些函数。每个函数将元素（或其textContent）记录到控制台，修改文本内容，然后调用下一个函数。令我困惑的是如何记录这些更改。

If I log element.textContent, I get the behavior I expected：每个日志打印前一个函数留下的字符串。

If I log the element itself, I get a different behavior *：每个日志输出最终状态的元素，而不是调用日志时的状态。

这使我认为元素是通过引用传递的，导致所有引用在脚本继续时一起更新，而元素的文本内容按值记录。

如果这是真的，我怎么知道预期的行为？所有DOM引用都是通过引用传递的，而字符串（原语）是按值传递的吗？据我了解，JavaScript通过引用和基元按值传递对象。那是在发生什么事吗？

* JS Bin的输出比Chrome提供的更详细 - 但它确实描述了object类型的元素。我正在使用的完整代码是（使用element.textContent，而不是element）。

<html>
<body>
<p id="paragraph">First paragraph</p>
<script>
  (function () {
    'use strict'

    var one = function () {
      console.log(example.textContent)
      example.textContent = example.textContent.replace('paragraph', 'call')
      two()
    }
    var two = function () {
      console.log(example.textContent)
      example.textContent = example.textContent.replace('First', 'Second')
      three()
    }
    var three = function () {
      console.log(example.textContent)
      example.textContent = example.textContent.replace('Second', 'Third')
      console.log(example.textContent)
    }

    var example = document.getElementById('paragraph')
    console.log(example.textContent)
    one()
  })()
</script>
</body>
</html>

Answer 1

如果这是真的，我怎么知道期望哪种行为？

阅读相关API的文档。例如，DIV element的HTML5规范包含指向interface HTMLDivElement API的链接，该链接告诉您各种方法和属性返回的内容。

很遗憾，HTML5并未包含所有相关信息，因此您还必须检查其他规范，例如W3C DOM Core的textContent。

您还可以浏览各种web APIs的Mozilla开发者网络（MDN）。可能最简单的方法是调用方法或访问属性，并使用 typeof 查看它返回的内容。

DOM元素是否通过引用传递给console.log？

1 个答案: