Question

我无法理解为什么我无法正确访问JavaScript类中的元素对象的firstChild。我可以在没有firstChild的情况下正确设置innerHTML，但是我想在firstChild上设置它。使用console.dir（this.waitStatus）显示它有一个firstChild。我没有使用jQuery，因为它可能在我想要运行时没有加载，因为它是一个加载指示器。

    class LoadingIndicator{

        constructor(elementID){

            this.tick = 8;

            this.waitStatus = document.getElementById(elementID);

            setInterval(
                this.animateLoader.bind(this),
                10
            )        

        }

        animateLoader (){        

            if(this.tick == 8){

                this.waitStatus.firstChild.innerHTML = ".";

            }
            else if(this.tick == 16){

                this.waitStatus.firstChild.innerHTML = "..";

            }else if(this.tick == 24){

                this.waitStatus.firstChild.innerHTML = "...";

                this.tick = 0;

            }

            this.tick += 1;

        }

    }

var supervisorLoadingIndicator = new LoadingIndicator('supervisorsTableLoading');

HTML

<p id='supervisorsTableLoading' style='width:700px; height:0px; text-align:left; padding-bottom:20px;'>
<span id='supervisorsTableLoadingInner' style='margin-left:30%'>&nbsp;</span>
</p>

Answer 1

firstChild是文本节点（<span之前的换行符），因此.innerHTML并不实用。请改用.firstElementChild或.children[0]。

class LoadingIndicator {
    constructor(elementID) {
        this.tick = 8;
        this.waitStatus = document.getElementById(elementID);
        setInterval(this.animateLoader.bind(this), 10)        
    }

    animateLoader () {        
        if (this.tick == 8) {
            this.waitStatus.firstElementChild.innerHTML = ".";

        } else if (this.tick == 16) {
            this.waitStatus.firstElementChild.innerHTML = "..";

        } else if (this.tick == 24) {
            this.waitStatus.firstElementChild.innerHTML = "...";
            this.tick = 0;
        }
        this.tick += 1;
    }
}

var supervisorLoadingIndicator = new LoadingIndicator('supervisorsTableLoading');

或者您可以简单地删除该空白文本并使用.firstChild。

此外，您并未真正设置HTML内容，因此我个人使用.textContent代替。

this.waitStatus.firstElementChild.textContent = "...";

IE8及更低版本不支持这些属性。

如果您仍然支持IE8，那么您可以对它们进行填充。

如果您支持IE6 / 7，请坚持使用.innerHTML并删除该空白。

Answer 2

使用this.waitStatus.children [0]，firstChild将返回非元素节点。

＆＃13;

class LoadingIndicator{

        constructor(elementID){
            
            this.tick = 8;

            this.waitStatus = document.getElementById(elementID);
            console.log(this.waitStatus.firstChild);
            setInterval(
                this.animateLoader.bind(this),
                10
            )        

        }

        animateLoader (){        
            if(this.tick == 8){

                this.waitStatus.children[0].innerHTML = ".";

            }
            else if(this.tick == 16){

                this.waitStatus.children[0].innerHTML = "..";

            }else if(this.tick == 24){

                this.waitStatus.children[0].innerHTML = "...";

                this.tick = 0;

            }

            this.tick += 1;

        }

    }

var supervisorLoadingIndicator = new LoadingIndicator('supervisorsTableLoading');

＆＃13;

<p id='supervisorsTableLoading' style='width:700px; height:0px; text-align:left; padding-bottom:20px;'>
<span id='supervisorsTableLoadingInner' style='margin-left:30%'>&nbsp;</span>
</p>

＆＃13;

JavaScript构造函数类中元素的firstChild

2 个答案: