[英]what is the difference between ways of assigning values to HTML elements via javascript?
I am using Javascript with TamperMonkey to modify a website not owned by me, just to make it a little more usable.我正在使用带有 TamperMonkey 的 Javascript 来修改一个不属于我的网站,只是为了让它更有用一点。 To use a simple situation I have a page with a search box and the data I need to enter in said search box happens to be on the page that is loaded.
为了使用一个简单的情况,我有一个带有搜索框的页面,我需要在所述搜索框中输入的数据恰好在加载的页面上。 I am taking the data on the page and entering it into the search box.
我正在获取页面上的数据并将其输入到搜索框中。
I have the following code that works:我有以下有效的代码:
var searchBox = document.getElementById('searchtext');
searchBox.value = document.getElementById('dataToSearch').innerText;
The following code does not work.以下代码不起作用。 Not the only thing that changed was where the ".value" is located.
改变的不仅仅是“.value”所在的位置。
var searchBox = document.getElementById('searchtext').value;
searchBox = document.getElementById('dataToSearch').innerText;
My question is why does the first example work when the second does not?我的问题是为什么第一个例子有效而第二个例子无效? I do not get an error, it just assigned the object type instead of the actual value.
我没有收到错误,它只是分配了对象类型而不是实际值。
The value
property of an element is actually a getter/setter:元素的
value
属性实际上是一个 getter/setter:
console.log( Object.getOwnPropertyDescriptor( HTMLInputElement.prototype, 'value' ) );
When you do当你做
var searchBox = document.getElementById('searchtext').value;
you invoke the getter and the current value in the input goes into the searchBox
variable as a string.您调用 getter,输入中的当前值作为字符串进入
searchBox
变量。
Reassigning the string variable with searchBox = document.getElementById('dataToSearch').innerText;
使用
searchBox = document.getElementById('dataToSearch').innerText;
重新分配字符串变量searchBox = document.getElementById('dataToSearch').innerText;
does nothing but reassign the string variable.什么也不做,但重新分配的字符串变量。 If you want to change the input value, you'll have to invoke the setter, and the only way to invoke the setter is to assign to the
.value
property:如果要更改输入值,则必须调用 setter,调用 setter 的唯一方法是分配给
.value
属性:
document.getElementById('searchtext').value = document.getElementById('dataToSearch').innerText;
Reassigning a variable name, by itself, eg重新分配一个变量名,本身,例如
someVarName = newValue
will never have any side-effects (except in the very unusual case of argument lists and the arguments
object).永远不会有任何副作用(除非在非常不寻常的参数列表和
arguments
对象的情况下)。
As a side note, keep in mind that you should almost never want to use .innerText
- prefer textContent
if you're retrieving text, or innerHTML
if retrieving HTML markup.作为旁注,请记住,您几乎永远不应该使用
.innerText
- 如果您正在检索文本,则更喜欢textContent
,如果检索 HTML 标记,则更喜欢innerHTML
。
@CertainPerformance's answer is correct, but you'd encounter a similar phenomenon even if it was a normal property, with no getters or setters. @CertainPerformance 的答案是正确的,但即使它是一个没有 getter 或 setter 的普通属性,您也会遇到类似的现象。
For example:例如:
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' }
This is because reassigning a variable ( a = 1
) does not change other references to that variable.这是因为重新分配变量 (
a = 1
) 不会更改对该变量的其他引用。 Setting a property , however ( ab = 1
), mutates the object on which the property is present.然而,设置一个属性(
ab = 1
)会改变该属性所在的对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.