通過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 ）會改變該屬性所在的對象。