将 NodeList 与元素 id 的数组进行比较答案

【问题标题】：Comparing a NodeList to an Array of element id's将 NodeList 与元素 id 的数组进行比较
【发布时间】：2013-09-07 03:36:04
【问题描述】：

我为下面无序列表的childNodes创建了一个NodeList

<body>
 <ul id="win" >win
  <li id="aa0">text</li>
  <li id="aa1"></li>
  <li id="aa2"></li>
  <li id="aa3"></li>
  <li id="aa4"></li>
  <li id="aa5"></li>
 </ul>
</body>

我创建了一个元素 id 数组，我想将 NodeList 与它进行比较

 ['aa0','aa1,'aa7','aa8']

我使用以下 javascript（如下）将 NodeList 与 Array 进行比较。目标是确定数组中的哪些元素已经在 DOM 中或需要添加到 DOM 中...并确定当前在 DOM 中的哪些元素需要删除，以便我可以附加 UL 以仅包含id 在数组中。

function  nodeinfo(){
 //these are the ids that we want in the ul
 var ids=['aa0','aa1','aa7','aa8']

 var node=document.getElementsByTagName('ul')[0];
 var nodelist=node.childNodes;

     //test to see if array ids are in nodelist
     for(var j=0;j<ids.length;j++){
        if(document.getElementById(ids[j])){alert(ids[j]+" is here, keep")}
        else{alert(ids[j]+" is not here, add")}
        }

     //test to see if nodelist ids are in array
     for(var j=0;j<nodelist.length;j++){
         if(nodelist[j].id != undefined){ 
            var tempi=0
            for(var k=0;k<ids.length;k++){
                if(nodelist[j].id === ids[k]){tempi++}
                }
            if (tempi !=1){alert(nodelist[j].id+" is unwanted, remove")}
            }
        }
    }

目前我只是在我将引用附加结构的地方显示警报。请注意，我对此很陌生。我知道 NodeList 的行为不像数组，在此函数中间调整 DOM 会改变 NodeList 并可能搞砸一切。

我的问题是：这似乎有点笨重，是否有更简洁或更强大的方法来实现这个目标？正如我在这里展示的那样，尝试基于数组调整 DOM 结构是否存在任何固有的危险？

请不要使用 jquery。

感谢您的帮助

【问题讨论】：

您需要支持哪些浏览器？如果您可以避免使用旧的 IE，那么 Array.filter 之类的内容会有所帮助
至少IE8及以上...但更喜欢IE6
出于好奇，为什么没有jquery？（特别是如果您计划支持 IE6-8。）
如果您需要确定哪些项目需要在 DOM 中，哪些需要从 DOM 中删除（准确复制 id 数组），您最好只运行 ID 数组并每次创建一个新列表。最终结果相同，逻辑更少。
我处于学习模式，所以我更喜欢使用纯javascript而不是jquery。

标签： javascript html arrays dom

【解决方案1】：

使用关联数组会更容易，而不是使用 id 数组。这将使您的第二个循环显着不那么繁琐：

var ids = {
   aa0: true,
   aa1: true,
   aa7: true,
   aa8: true
};

var remove = [];
var add = [];

for(var id in ids) if(ids.hasOwnProperty(id)) {
    if(document.getElementById(id) === null) {
       remove.push(id);
    }
}

for(var i = 0; i < nodeList.length; i++) {
    var node = nodeList[i];

    if(typeof node.id !== undefined && !ids[node.id]) {
        remove.push(node.id);
    }
}

如果您使用的是 id 数组，则可以将第二个循环中的 if 更改为使用以下 indexOf：

if(typeof node.id !== undefined && ids.indexOf(node.id) > -1) {
    remove.push(node.id)
}

在性能方面，第一个更好，因为从关联数组中查找是 O(1)（除非发生冲突），而 indexOf 的最坏情况是 O(n)（意味着它必须遍历整个列表找出在最坏情况下是否存在密钥）。

【讨论】：

非常好。谢谢你。在此之上创建一个将 id 数组转换为关联数组的函数是否有意义？
物体仍然很绿，但我正在努力通过它。
@WilliamSmith 这是您获得身份证的唯一方法吗？作为一个数组？我将编辑我的解决方案，向您展示如何使用数组。
目前我会将 id 数组作为变量传递给函数，因为我一直很乐意这样做，但我真的在寻找速度和效率，所以使用对象作为关联数组可能是最好的选择。如果您也可以显示数组选项，那就太好了。