为什么document.getElementById（'foo'）。value不是引用？

Question

我正在使用以下功能，我喜欢它：
var $ = function( id ) { return document.getElementById( id ); };

对于我当前的代码，我仅曾经引用每个元素的value。
所以我想：“为什么不更新我的功能以包含.value？

所以这很好用：

var $ = function( id ) { return document.getElementById( id ); };
 $("foo").value = whatever // WORKS JUST FINE :)

但这会中断：

var $ = function( id ) { return document.getElementById( id ).value; };
$("foo") = whatever // Left side of assignment is not a reference

我认为我对发生的事情有所了解，但是由于很难用语言表达，所以我想我错了。

那么这是怎么回事？

顺便说一下，请随时发表评论：

• 这是参考错误吗？
• 是否可以突出显示代码以更好地指出每行之间的差异？
• 我该如何编写代码来显示所有类似此图片的错误而不是注释文本（尤其是如何缩小它的注释）？

Answer 1

一个元素的.value实际上是一个setter / getter。当以下

document.getElementById( id ).value

被评估为表达式（就像在$中一样，您试图将其返回），而不是被赋给getp，它被调用，并且其评估为原始。因此，对于口译员：

return document.getElementById( id ).value;

变成类似

return 'someValue';

因此，当调用$时，将返回一些字符串，但是就像

'someValue' = 'newValue'

不起作用，也不起作用

$("foo") = 'newValue';

对于您要执行的工作，您必须通过分配给.value 属性，来调用设置器。将.value评估为表达式（例如，在return的右侧）后，您已经调用了吸气剂。

调用设置方法的一种可能方法是：

const set$ = (id, newVal) => {
  document.getElementById(id).value = newVal;
};
set$('foo', 'myNewVal');

Answer 2

在第二个函数中，$("foo")的返回值是一个字符串。您不能分配给字符串：

var $ = function( id ) { return document.getElementById( id ).value; };
console.log(typeof $("foo"), $("foo"))

<input id="foo" value = "Bar"/>

有很多选择。您可以让函数采用第二个参数来设置值：

var $ = function(id, val) {
  let el = document.getElementById(id)
  if (val !== undefined) {
    el.value = val
  }
  return el
}

console.log($("foo", "test"))

<input id="foo" value="Bar" />

但是，仅返回元素，分配值或创建新的设置值函数可能更清楚。