Question

我有以下一些js创建一个div，还没有将它附加到页面但是用一些HTML填充它。我可以使用getElementsByClassName查询该HTML，如警告中所示，该警报正确警告为“2”。

但是，尝试在同一元素上使用getElementById会导致错误“对象不支持属性或方法'getElementById'”

function verbatim(fn) {
    return fn.toString().split("/*")[1].split("*/")[0];
}

var aggregatorContainer = document.createElement("div");
aggregatorContainer.id = "usageByCampusNow";

var someHTML = verbatim(function () {/*
            <h2>Lab Locations and Current Use</h2>

            <div class='campusIndicator master'>
                <div id='masterAggregator'>

                    <div id='masterSelector'>
                        <div class='aggDetails'>
                            <h3 id="masterSelection"></h3>
                        </div>
                    </div>
                    <div id='masterOptions'><ul id='masterOptionsList'></ul></div>

                    <div class='guageContainer'>
                        <div class='campusGuage'>
                            <span><img class='clockhand' src='/images/labs/handred2.png'></span>
                            <span><img class='clockhand' src='/images/labs/hand2.png'></span>
                        </div>
                        <span class='txtUse'></span>
                    </div>
                </div>
            </div>
        */
});

aggregatorContainer.innerHTML = someHTML;
alert(aggregatorContainer.getElementsByClassName("clockhand").length);
try {
    var masterAggContainer = aggregatorContainer.getElementById("masterAggregator"); // issue
}
catch (err) {
    alert(err); // Object doesn't support property or method 'getElementById'
}

https://jsfiddle.net/4zougwm9/

简单的解决方案是我将元素添加到页面

 document.getElementById("someElement").appendChild(aggregatorContainer);

然后我可以使用document.getElementById来获取aggregatorContainer中的元素让我高兴，但我希望我能在HTML上做好所有准备工作，然后将其附加到页面以防出现问题并且我最终得到了一个让页面发臭的时髦元素。所以我想在将aggregatorContainer.getElementById添加到页面之前查询getElementById

基本上，为什么我不能在附加之前对此元素使用getElementsByClassName？ it似乎没问题！

Answer 1

来自fragments的MDN文档：

getElementsByClassName可以在任何元素上调用，而不仅仅在文档上调用。调用它的元素将用作搜索的根。


https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Document.getElementsByClassName没有那个说明：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

不同之处在于，Document.getElementById似乎是来自getElementsByClassName的{{1}}，而NodeList则不是Document。我假设的原因是getElementById返回它正在处理的内容，即getElementsByClassName或NodeList，因此允许可链接性;而HTMLCollection将始终返回零或一getElementById或Node s。

无法在尚未附加到文档

1 个答案: