DOM元素是否通过引用传递到console.log? [英] Are DOM elements passed by reference to console.log?
问题描述
我什至不确定我在这里问的是什么.我只是知道那不是我所期望的.
I'm not even sure exactly what I'm asking here. I just know it isn't what I expected.
我有一个页面脚本(见下文)，该脚本通过其ID来获取对元素的引用，然后在其上调用一些函数.每个函数将元素(或其 textContent )记录到控制台，修改文本内容，然后调用下一个函数.令我感到困惑的是如何记录这些更改.
I have a page script (see below) that grabs a reference to an element by its ID, then calls a few functions on it. Each function logs the element (or its textContent) to the console, modifies the text contents, then calls the next function. What confuses me is how those changes are logged.
如果我登录 element.textContent ，我将获得预期的行为:每个日志都按上一个函数的左侧显示字符串.
If I log element.textContent, I get the behavior I expected: Each log prints the string as left by the previous function.
如果我记录元素本身，则会得到不同的行为 *:每个日志以最终状态输出元素，而不是调用日志时的状态.
If I log the element itself, I get a different behavior*: Each log outputs the element in its final state, not its state when the log was called.
这使我认为该元素是通过引用传递的，导致所有引用在脚本继续运行时一起更新，而该元素的文本内容是按值记录的.
This leads me to think that the element is passed by reference, resulting in all the references being updated together as the script continues, while the element's text contents are logged by value.
如果这是真的，我如何知道预期的行为?是否所有DOM引用都通过引用传递，而字符串(基元)是否按值传递?据我了解，JavaScript通过引用传递对象，并通过值传递基元.那是这里发生的事吗?
If this is true, how do I know which behavior to expect? Are all DOM references passed by reference, while strings (primitives) by value? As I understand it, JavaScript passes objects by reference and primitives by value. Is that what’s happening here?
* JS Bin的输出比Chrome提供的更为详细，但是它确实描述了 object 类型的元素.我使用的完整代码如下(使用 element.textContent ，而不是 element ).
*The output from JS Bin is far more verbose that Chrome gives—but it does describe the elements as of type object, however. The full code I was using is (using element.textContent, not element) below.
<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>
推荐答案
如果这是真的，我如何知道预期的行为?
If this is true, how do I know which behavior to expect?
阅读相关API的文档.例如， DIV元素 包含指向 接口HTMLDivElement API ，可告诉您各种方法和属性返回什么.
Read the documentation for the relevant API. For example, the HTML5 specification for the DIV element includes a link to the interface HTMLDivElement API that tells you what various methods and properties return.
不幸的是，HTML5并未包含所有相关信息，因此您还必须检查其他规范，例如用于
Unfortunately, HTML5 doesn't include all relevant information, so you also have to check other specifications such as the W3C DOM Core for textContent.
您还可以在Mozilla开发人员网络(MDN)周围查找各种 Web API.可能最简单的方法是只调用方法或访问属性，然后使用 typeof 看到其返回的内容.
You can also look around the Mozilla Developer Network (MDN) for various web APIs. Probably the simplest way is to just call the method or access the property and see what it returns using typeof.
这篇关于DOM元素是否通过引用传递到console.log?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
