0

我为下面的无序列表的 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。

谢谢你的帮助

4

1 回答 1

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)（意味着它必须遍历整个列表才能找出键是否存在于最坏的情况下） .

于 2013-09-03T22:16:26.867 回答