getElementsByClassName返回[]而不是异步附加节点

小编典典

getElementsByClassName返回[]而不是异步附加节点

ajax

（第一个问题制定得很厉害后，我再问我一个问题）

我面临以下问题：

<div class="testA" id="test1"></div>

上面编写的元素是预定义的。现在，我通过XMLHttpRequest＆Co.加载xml树，并提供以下响应：

<response>
    <div class="colorSelector" id="0-0">
        <div class="gbSelector" id="1-0">
            <table style="none" id="2-0"></table>
        </div>
    </div>
</response>

我现在追加第一个div使用

request.responseXML.getElementsByTagName("response")[0]
                       .getElementsByTagName("div")[0]

进入预定义 div

<div class="testA" id="test1">

最终文档如下所示（已使用开发工具检查）：

<div class="testA" id="test1">
    <div class="colorSelector" id="0-0">
        <div class="gbSelector" id="1-0">
            <table style="none" id="2-0"></table>
        </div>
    </div>
</div>

现在，当我尝试<div class="colorSelector" id="0-0">使用元素时，getElementById("0-0")会得到预期的结果。

但是使用getElementsByClassName("colorSelector")退货[]。

我错过了什么？这可能是节点属于类型Element而不是类型的事实的残余HTMLElement吗？

阅读 262

2020-07-26

共1个答案

小编典典

这是针对Firefox，Opera，Chrome和Safari的一种方法。基本上，您只需要执行div.innerHTML =
div.innerHTML即可将其内容重新解释为HTML，这会将XML文件中的类属性视为HTML类名。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.addEventListener("DOMContentLoaded", function() {
                var div = document.getElementsByTagName("div")[0];
                var req = new XMLHttpRequest();
                req.onreadystatechange = function() {
                    if (this.readyState === 4 && this.status === 200) {
                        var doc = this.responseXML;
                        div.appendChild(document.importNode(doc.getElementsByTagName("response")[0].getElementsByTagName("div")[0], true));
                        div.innerHTML = div.innerHTML;
                        alert(document.getElementsByClassName("colorSelector").length);
                    }
                };
                req.open("GET", "div.xml");
                req.send();
            }, false);
        </script>
    </head>
    <body>
        <div class="testA"></div>
    </body>
</html>

如果要在本地支持xhr的浏览器中进行本地测试，请删除this.status === 200。

importNode（）函数似乎在IE中不起作用（例如9）。我收到一个模糊的“不支持接口”错误。

您也可以这样操作：

var doc = this.responseXML;
var markup = (new XMLSerializer()).serializeToString(doc.getElementsByTagName("response")[0].getElementsByTagName("div")[0]);
div.innerHTML = markup;

只要标记是HTML友好的，就空元素的结束标记而言。

2020-07-26