javascript - 如何初始化 firstChild 这样我就不会得到 "x.firstChild is null or not an object"？

Question

在我的 JSP/HTML 中我有这个:

<div id="exampleLabel"> </div>

然后在我的 javascript 部分，我有一个像这样从 onclick 调用的函数；

function changeLabel(){
    exampleLabel.firstChild.nodeValue = 'LABEL HAS CHANGED';
}

这在 Chrome 中工作正常，在 Firefox 和 IE 中什么都不做，页面上出现错误

exampleLabel.firstChild is null or not an object.

好吧，我可以认为没有 firstChild，所以尝试做 firstChild。任何事情都是 NPE，我什至可以认为其他浏览器不会像 Chrome 那样自己初始化它。

问题是，我该如何自己初始化它，然后我就可以 .nodeValue = "blahblah" 使用它？

Answer 1

它在 IE 中不起作用的原因是，与所有其他主要浏览器不同，它不会在您的 HTML 中为空白创建文本节点，因此您的 <div>只包含一个空格在 IE 中没有子节点。我建议手动添加文本节点，或更改现有节点。

此外，除非您已声明 exampleLabel在其他地方，您依赖于 IE 和 Chrome 的非标准且相当棘手的功能，该功能将 DOM 元素的 ID 映射到全局对象的属性(即，您可以通过其 ID 将元素称为变量)。这在其他浏览器中不起作用。你应该做的是使用 document.getElementById() .

function changeLabel(labelText) {
    var exampleLabel = document.getElementById('exampleLabel');
    var child = exampleLabel.firstChild;
    if (!child) {
        child = document.createTextNode('');
        exampleLabel.appendChild(child);
    }
    child.nodeValue = labelText;
}

changeLabel('LABEL HAS CHANGED');