JavaScript 构造函数 class 中元素的 firstChild

Question

我无法理解为什么我无法正确访问 JavaScript class 中元素对象的 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，那么您可以对它们进行 polyfill。

如果您支持 IE6/7，请坚持使用 .innerHTML 并去掉那个空格。

Answer 2

使用this.waitStatus.children[0]，firstChild会return非元素节点。

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');

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

JavaScript 构造函数 class 中元素的 firstChild

firstChild of an element in JavaScript constructor class

javascript

constructor

bind

class

ecmascript-6