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

Question

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

我有以下有效的代码：

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; 重新分配字符串变量什么都不做但重新分配字符串变量。如果要更改输入值，则必须调用 setter，而调用 setter 的唯一方法是分配给 .value 属性：

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

重新分配变量名，例如

someVarName = newValue

永远不会有任何 side-effects（除了在非常不寻常的参数列表和 arguments 对象的情况下）。

作为旁注，请记住您应该 almost never want to use .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) 不会更改对该变量的其他引用。设置属性，但是 (a.b = 1) 会改变属性所在的对象。

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

what is the difference between ways of assigning values to HTML elements via javascript?

html

javascript

tampermonkey