当前位置: 首页 > 面试题库 >

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

齐英韶
2023-03-14
问题内容

(第一个问题制定得很厉害后,我再问我一个问题)

我面临以下问题:

<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吗?


问题答案:

这是针对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友好的,就空元素的结束标记而言。



 类似资料:
  • 我试图了解异步/等待如何与promise一起工作。 据我所知,await应该是阻塞的,在上面的代码中,它似乎阻塞了返回带有原语

  • 问题内容: 我的代码: 当我尝试运行这样的东西时: 我越来越: 但为什么? 我的主要目标是将令牌(从令牌中返回承诺)转换为变量。然后才执行一些操作。 问题答案: 只要其结果尚未解决,promise将始终记录未决。无论promise状态如何(已解决或仍处于待处理状态),您都必须调用promise来捕获结果: 这是为什么? 承诺只是向前的方向;您只能解决一次。a的解析值传递给其或方法。 根据Promi

  • 我的代码: 当我尝试运行这样的东西时: 我得到了: 但为什么? 我的主要目标是将返回承诺的中的token转换为一个变量。然后才预形成一些动作。

  • 我用谷歌的oauth进行了测试,并尝试了不同的范围。 然而,我随后将我的范围请求简化为以下内容:“https://www.googleapis.com/auth/userinfo.email” 以下是dotnetcore的更多内容 然后从返回的代码中检索访问令牌等。 然而,我得到的似乎比我要求的要多。我在返回的范围中得到这个: openidhttps://www.googleapis.com/au

  • 我用webpack建立了一个浏览器umd库。 我正在侦听输入文件的onchange事件。当有人提交图像/文件时,它会将其转换为base64。我试图让它尽可能看起来不那么明显,所以我使用了promises和wait/asynchttps://blog.shovonhasan.com/using-promises-with-filereader/. 但是,有一个问题-当我调用convertToBase

  • 我试图用Java创建一个XPath表达式(8,默认XPath实现)。我正在做以下工作: 我在同一级别的文档中有多个PartyId节点,因为它的父节点是重复的。我得到了结果,但只有一个节点。(第一)。 补充信息:如果我在表达式的末尾写[$k],比如[1]或[2],我得到了我的元素,但是我需要它们。:( 但是,如果我正在测试同一个XPath,例如http://www.freeformatter.com