用.value理解javascript语法

Question

我有一个文本框，可以自动将用户输入的值更改为大写，代码按照我希望的方式工作：

function myFunction() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
}

但是，如果我按如下方式重写它，它不会将文本框值更改为大写：

function myFunction() {
    var x = document.getElementById("fname").value; <--- notice I added value here
    x = x.toUpperCase();
}

我的印象是这两个节选都会起到同样的作用，那么为什么第二个节目不按照我打算的方式工作呢？

Answer 1

在第一个代码段中，x是一个DOM元素，您通过分配更改了value属性

x.value = x.value.toUpperCase();

在第二个代码段中，x只是 plain String ，它不包含对DOM元素的引用。 它与执行"someString" = "someOtherString"相同，显然，它不会反映在DOM中，因为在任何地方都没有对DOM元素的引用。

要点：

• 在第一个代码段中，您使用的是setter，因此value会被提升。
• 在第二个代码段中，您使用了getter并更改了返回的值，但这些值并不反映在DOM元素中。