Question

在我的HTML中，我有一个内容div，其中包含由php脚本创建并使用JQuery和Javascript处理的文章。使用Javascript，我使用'getElementsByClassName'函数将这些文章收集到一个数组中。我在这里写的脚本和HTML都是简化的。我需要这个数组，因为我试图使数组的长度大于10，每页只显示10篇文章。因此，第1页将是数组的索引0到9，第2页索引为10到19，等等。现在，

拿这个HTML代码。

<body>
<div id="content">
  <div class="article">
    <p>Article 1</p>
  </div>
  <div class="article">
    <p>Article 2</p>
  </div>
  <div class="article">
    <p>Article 3</p>
  </div>
</content>
</body>

这个Javascript代码。

$.post("getarticles.php",{ page:"home" } ,function(data){
        //place the content
        document.getElementById("content").innerHTML = jQuery.trim(data);

        //put elements in array
        arrArticles = document.getElementsByClassName("article");
        alert(arrArticles.length);

        document.getElementById("content").innerHTML = "";
        alert(arrArticles.length);
})

第一个警报给了我“3”，这是正确的..但是第二个警报给了我“0”。为什么在放入元素之后数组会丢失它的元素？

顺便说一下，'data'变量是php脚本传递的HTML字符串。例如：在php脚本中我有代码

echo "<div class="article"><p>Article 1</p></div><div class="article"><p>Article 2</p></div><div class="article"><p>Article 3</p></div>"

＆安培;

document.getElementById("contentWrap").innerHTML = "";

我知道这会导致问题，但我不知道为什么。任何人都可以解释或提供替代方案吗？

提前致谢

Answer 1

getElementsByClassName()返回动态数组（实际上是实时NodeList），如果/当您修改DOM时，它将动态更改。因此，如果使用innerHTML更改内容并且该数组中的元素受到影响，则数组将自动更改。

如果你想保留这个元素列表并使它不是实时的（因此在更改DOM时它不会改变），你可以将NodeList的副本复制成一个普通的数组（不是动态的）一旦它处于正常数组中，对DOM元素的引用将使它们不被破坏。如果您的代码更改了内容，它不会阻止它们被更改，但即使您的代码导致它们从DOM中删除它也会保留它们。

将动态NodeList的副本复制到静态数组中的一种方法是这样的：

// fetch dynamic NodeList
var items = document.getElementsByClassName("article");
// make static copy of NodeList into normal array
items = Array.prototype.slice.call(items);

或者，既然您的帖子是用jQuery标记的，那么您可以首先使用jQuery，它包含一个不受DOM中其他更改影响的静态节点数组：

var items = $(".article");

Answer 2

看起来document.getElementByClassName正在返回对更改标记时正在更新的元素数组的引用。不确定为什么;或许比我更了解情况的人可以回答这个问题。

使用jQuery选择适合我的数组：

var arrArticles = $(".article")

Answer 3

document.getElementsByClassName("article");

return [NodeList数组]，此数组包含指向DOM元素的指针

arrArticles = anotherArray;

这段代码不会创建anotherArray的副本，但它是一个指向另一个值的另一个指针的指针。

因此，当anotherArray中的元素被删除时，在arrArticles中元素也会消失。

放入.innerHTML =“”后数组元素丢失

3 个答案: