Question

我为

下面的无序列表的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")}
            }
        }
    }

目前我只是在显示警报，我将引用附加结构。请注意，我对此很陌生。我知道NodeLists不像数组那样，并且在这个函数的中间调整DOM会改变NodeList并且可能搞砸了所有东西。

我的问题是：这看起来有点笨重，是否有更简洁或更健全的方法来实现这一目标？在我这里展示的基于数组的DOM结构调整是否存在任何固有的危险？

请不要jquery。

感谢您的帮助

Answer 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)（意味着它有通过整个列表来确定在最坏的情况下密钥是否存在。）

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

1 个答案: