javascript - 更改元素的文本内容

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 中那样用 .textContent 声明一个变量 field_error。 trim()，而不是稍后使用 .textContent？

Answer 1

textContent属性实际上更像一个 getter/setter，可能会在 get 上应用转换(例如，每个子节点的 textContent 的串联)。

在您的第一种情况下，field_error 指向该 get 的结果(现在与 #field_error 元素无关)，因此进行更改不会影响原始结果对象。

同样无法设置您的 field 值(以更新 #field 元素)，因为它是值的操作副本..不是指向 DOM 的指针元素。