如何初始化firstChild所以我不知道"x.firstChild是null还是不是对象"？

Question

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

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

然后在我的javascript部分,我有一个像这样的onclick调用的函数;

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

这在Chrome中运行良好,在Firefox和IE中没有任何功能,页面上出现错误

exampleLabel.firstChild为null或不是对象.

好的,我可以认为没有第一个孩子所以试图做第一个孩子.YYTHING会是一个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');