0

我正在创建一个使用 fetch 来检索外部 HTML 的脚本，然后通过一些操作创建 2 个 HTMLcollection 并最终遍历它们以显示一个 div，其中一个元素来自第一个集合，一个元素来自第二个集合。这是我写的一些代码：

<section id="to_take">
       <p>THE EUROPEAN PARLIAMENT AND THE COUNCIL OF THE EUROPEAN UNION,</p>
       <p>Having regard to the Treaty establishing the European Community, and in particular Article 175(1) thereof,</p>
       <p>Having regard to the proposal from the Commission,</p>
       <p>Having regard to the opinion of the European Economic and Social Committee <a href="#1" id="1back">(1)</a>,</p>
       <p>Having consulted the Committee of the Regions,</p>
       <p>Acting in accordance with the procedure laid down in Article 251 of the Treaty <a href="#2" id="2back">(2)</a>,</p>
       <p>Whereas:</p>
<ol> 
     <li>some li elements that I'm not posting because they are too much.</li>
</ol>
<p>another P element</p>
</section>

这是脚本采用的 HTML 代码，其他文档是相同的，但使用的是另一种语言。

脚本是：

async function request(input_1, input_2){
        var left = await fetch(input_1);
        var right = await  fetch(input_2);
        var text_left = await left.text();
        var text_right = await right.text();
        var parser = new DOMParser();
        var part_1 = parser.parseFromString(text_left, "text/html");
        var parser_2 = new DOMParser();
        var part_2 = parser_2.parseFromString(text_right, "text/html");
        var collection_1 = part_1.getElementById("to_take").children;
        var collection_2 = part_2.getElementById("to_take").children;
        display_elements(collection_1, collection_2);

    }
        function display_elements(array_1, array_2){
        var article = document.getElementById("contenitore");
        var counter = 0;
        for (var i in array_1){
            var container = document.createElement("div");
            container.appendChild(array_1.item(counter));
            container.appendChild(array_2.item(counter));
            article.appendChild(container);
            counter++;
        }
    }

该脚本实际上可以很好地在正确的页面部分显示它必须显示的内容，但它有 1 个奇怪的行为和 1 个错误。首先：它从 2 个集合中获取第一个元素，然后脚本跳过第二个元素并转到第三个元素，然后再次获取 1 个元素并跳过下一个元素。第二：它给了我这个错误：无法在'Node'上执行'appendChild'：参数1不是'Node'类型。我试图修改一些元素，但基本上我不明白为什么它不能以正确的方式工作。我尝试更改集合上的方法，使用 While 而不是 for，但我不理解错误，因为它适用于某些元素而不适用于其他元素。

4

1 回答 1

0

您的循环正在跳过元素，因为当您这样做时：

container.appendChild(array_1.item(counter))

...您将该项目从容器array_1元素中移开。这意味着所有后续项目array_1将从它们当前的索引位置移动到更少（它是一个实时集合）。然而，你增加counter++了 ，所以在那一刻你跳过了一个你永远不会访问的数组元素。

相反，根本不要使用计数器，而只需使用array_1.item(0), 并循环直到array_1为空：

while (array_1.length) {
    var container = document.createElement("div");
    container.appendChild(array_1.item(0));
    container.appendChild(array_2.item(0));
    article.appendChild(container);
}

只要意识到你真的清空了两个“to_take”元素，它们失去了他们的子元素。如果您不希望这种情况发生，请保持您的代码原样，但按照您的方式克隆元素appendChild：

var counter = 0;
for (var i in array_1){
    var container = document.createElement("div");
    container.appendChild(array_1.item(counter).cloneNode(true));
    container.appendChild(array_2.item(counter).cloneNode(true));
    article.appendChild(container);
    counter++;
}

为了保护您的代码免受其中一个数组较短或某个项目为 的情况null，请添加一些if条件：

var counter = 0;
for (var i in array_1){
    var container = document.createElement("div");
    if (array_1.item(counter)) 
        container.appendChild(array_1.item(counter).cloneNode(true));
    if (array_2.item(counter)) 
        container.appendChild(array_2.item(counter).cloneNode(true));
    article.appendChild(container);
    counter++;
}
于 2019-12-29T22:41:00.007 回答