firstChild.nodeValue失效排查：仅首个字段可显示错误提示

嘿，我太熟悉这个坑了！你碰到的问题核心在于firstChild.nodeValue的工作逻辑——它需要目标span元素已经存在一个文本节点作为第一个子节点，否则firstChild会返回null，这时访问null.nodeValue自然就会报错。

为什么只有第一个字段正常？ #

大概率是你的第一个错误提示span在HTML里是这样写的：

里面有个空白字符（空格/换行），浏览器会自动把这个空白解析成一个文本节点，所以firstChild能拿到这个节点，赋值nodeValue就没问题。

而后面的span可能是这样的：

完全空的标签，没有任何子节点，firstChild就是null，直接访问nodeValue就会抛出错误。

三种可靠的解决办法 #

1. 用textContent/innerText代替（最推荐）

这两个属性会自动处理文本节点的创建和更新，不用管子节点的状态，代码简洁又可靠：

// 替换原来的 firstChild.nodeValue 赋值逻辑
$('error-rate').textContent = '请输入大于0的利率值';
$('error-years').textContent = '请输入有效的年限';

textContent是标准属性，innerText更贴合浏览器渲染的文本（会忽略隐藏元素），根据你的需求选就行。

2. 给所有错误span添加初始空白文本

在HTML里给每个错误提示span都加个空白字符，确保每个span都有一个文本节点：

<span id="error-investment"> </span>
<span id="error-rate"> </span>
<span id="error-years"> </span>

这样每个span的firstChild都是文本节点，原来的firstChild.nodeValue赋值逻辑就能正常工作了。

3. 手动检查并创建文本节点（如果坚持用nodeValue）

在赋值前先判断firstChild是否存在，不存在就手动创建一个文本节点添加进去：

var setErrorText = function(spanId, text) {
    var span = $(spanId);
    // 如果没有第一个子节点，创建空文本节点
    if (!span.firstChild) {
        span.appendChild(document.createTextNode(''));
    }
    span.firstChild.nodeValue = text;
};

// 调用示例
setErrorText('error-rate', '请输入有效的利率');

总结 #

优先用textContent，它是现代浏览器的标准用法，能避免很多子节点相关的坑，代码也更易读。

内容的提问来源于stack exchange，提问作者the_crouton