更改元素的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_error和.textContent中那样，仅用field声明变量.value.trim()，而不是以后使用.textContent？ / p>

Answer 1

textContent属性实际上更像是一个getter / setter方法，可能对get应用转换（例如，串联每个子节点的textContent）。

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

同样无法设置您的field值（以更新#field元素），因为它是该值的受控副本。不是指向DOM元素的指针。