更改元素的textContent

Question

我正在制作一个注册表单，并希望在另一个元素中显示错误，如果输入不符合条件。

//input element
let field = document.getElementById("field").value.trim();
//div for showing error 
let field_error = document.getElementById("field_error").textContent;
if(field.length > 30){
field_error = "Input too long";
}

如果我写出以下代码，它将不执行任何操作，但如果我像这样编写代码：

let field_error = document.getElementById("field_error");
if(field.length > 30){
field_error.textContent = "Input too long";    
}

为什么我不能像我在 field 和 .value.trim() 中一样声明一个名为field_error的变量，而是后来再使用.textContent呢？

- sofronijev

---

field_error是什么类型？DIV还是SPAN还是INPUT...？ - Moïze

因为.textContent计算出一个string，这个string本身是primitive。所以当你把field_error赋值给它的时候，它只是一个副本（按值传递），而不是一个引用。改变它只会影响它本身，而不会影响DOM。 - ambianBeing

类型是<small>。我明白我做错了什么，谢谢你的回答。 - sofronijev

Answer 1

textContent属性实际上更像是一个getter/setter，可能在获取时应用转换（例如连接每个子节点的textContent）。

在您的第一个案例中，field_error指向该获取结果（现在与#field_error元素无关），因此进行更改不会影响原始对象。

同样，您的field值也无法设置（以更新#field元素），因为它是值的操作副本，而不是DOM元素的指针。

- Rudu

---

哦，所以我实际上是给变量field_error赋值该元素的值，而不是指向DOM元素的指针。谢谢，我现在明白了。 - sofronijev