通过javascript为HTML元素赋值的方式有什么区别？

Question

我正在使用带有 TamperMonkey 的 Javascript 来修改一个不属于我的网站，只是为了让它更有用一点。 为了使用一个简单的情况，我有一个带有搜索框的页面，我需要在所述搜索框中输入的数据恰好在加载的页面上。 我正在获取页面上的数据并将其输入到搜索框中。

我有以下有效的代码：

var searchBox = document.getElementById('searchtext');
searchBox.value = document.getElementById('dataToSearch').innerText;

以下代码不起作用。 改变的不仅仅是“.value”所在的位置。

var searchBox = document.getElementById('searchtext').value;
searchBox = document.getElementById('dataToSearch').innerText;

我的问题是为什么第一个例子有效而第二个例子无效？ 我没有收到错误，它只是分配了对象类型而不是实际值。

Answer 1

元素的value属性实际上是一个 getter/setter：

 console.log( Object.getOwnPropertyDescriptor( HTMLInputElement.prototype, 'value' ) );

当你做

var searchBox = document.getElementById('searchtext').value;

您调用 getter，输入中的当前值作为字符串进入searchBox变量。

使用searchBox = document.getElementById('dataToSearch').innerText;重新分配字符串变量searchBox = document.getElementById('dataToSearch').innerText; 什么也不做，但重新分配的字符串变量。 如果要更改输入值，则必须调用 setter，调用 setter 的唯一方法是分配给.value属性：

document.getElementById('searchtext').value = document.getElementById('dataToSearch').innerText;

重新分配一个变量名，本身，例如

someVarName = newValue

永远不会有任何副作用（除非在非常不寻常的参数列表和arguments对象的情况下）。

作为旁注，请记住，您几乎永远不应该使用.innerText - 如果您正在检索文本，则更喜欢textContent ，如果检索 HTML 标记，则更喜欢innerHTML 。

Answer 2

@CertainPerformance 的答案是正确的，但即使它是一个没有 getter 或 setter 的普通属性，您也会遇到类似的现象。

例如：

 const obj1 = { value: 'foo' }; let variable1 = obj1.value; variable1 = 'bar'; console.log('obj1', obj1); // { value: 'foo' } const obj2 = { value: 'foo' }; let variable2 = obj2; variable2.value = 'bar'; console.log('obj2', obj2); // { value: 'bar' }

这是因为重新分配变量 ( a = 1 ) 不会更改对该变量的其他引用。 然而，设置一个属性（ ab = 1 ）会改变该属性所在的对象。