输入和dom值存储在哪里？

Question

这是一个非常基本的问题，但我不确定如何研究它。让我们说我有一个带有输入字段的html文件和一个javascript文件，其中包含一个函数来获取输入中输入的值：

HTML：

<input type='text' id='value' onclick='getValue()'>

JS文件：

var val;
function getValue(){
    val = document.getElementById('value').value;
    console.log(val)
}

当用户输入值时，该值存储在DOM中。然后我从DOM中获取值并将其存储在浏览器中加载的脚本文件中。

因为它现在存储在我的脚本文件中。如果我要重新加载页面，则存储的所有值都将重置为其原始文件。

从DOM获取的值是否存储在我加载的javascript文件中是否准确？或者是否存储在其他地方？

Answer 1

说它存储在[你的]脚本文件中“有点误导，但技术上准确。

DOM元素的任何数据都存储在该选项卡的浏览器内存中，该选项卡自行管理。由于您的Javascript只是该内存的一部分，因此它以某种方式存储在那里。所有工作原理的实际部分隐藏在浏览器中，并且可能在浏览器之间有所不同。

Answer 2

输入值存储在DOM树中（如果您想知道确切的位置：请参阅代码，例如：Chrome和Firefox）。您发布的JavaScript代码会复制该值。该副本独立于存储在DOM树中的值，您可以删除input-element并仍然使用JavaScript进行复制。所以答案有三个：

• 该值首先在DOM树中
• 当您在DOM树中复制和时，输入值的副本位于JavaScript堆栈中;至少我知道没有一步到位的方法。
• 如果删除DOM元素，则您在JavaScript中创建的副本将保留在JavaScript中

这使得例如可以使用两个不同的程序运行JavaScript和DOM解析。 Chrome使用他们的V8机器进行操作，您可以将其放入一些薄薄的包装中并单独运行。如果需要，可以将结果称为“节点”。