无法对尚未附加到文档的 HTML 元素使用 getElementById

Question

我有以下 js 位创建 div，尚未将其附加到页面，但确实用一些 HTML 填充了它。我可以使用 getElementsByClassName 查询 HTML，如警报中所示，正确警报为“2”。

但是尝试对同一元素使用 getElementById 会导致错误 "Object doesn't support property or method '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 好像没问题！

Answer 1

来自 Document.getElementsByClassName 的 MDN 文档：

getElementsByClassName can be called on any element, not only on the document. The element on which it is called will be used as the root of the search.

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

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

区别在于 getElementsByClassName 似乎是由 NodeList 继承自 Document 而 getElementById 不是。我假设的原因是 getElementsByClassName return 正在处理的是 NodeList 或 HTMLCollection，因此允许链接；而 getElementById 将始终 return 零或一个 Nodes 或 HTMLElements.

无法对尚未附加到文档的 HTML 元素使用 getElementById

unable to use getElementById on HTML element not yet appended to document

javascript

getelementbyid