javascript - JavaScript构造函数类中元素的firstChild

我无法理解为什么我无法正确访问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>

最佳答案

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并摆脱该空白。

关于javascript - JavaScript构造函数类中元素的firstChild，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43054521/