Javascript 将节点列表与元素id'；s_Javascript_Html_Arrays_Dom

Javascript 将节点列表与元素id'；s

javascript html arrays dom

Javascript 将节点列表与元素id'；s,javascript,html,arrays,dom,Javascript,Html,Arrays,Dom,我为下面无序列表的子节点创建了一个节点列表 <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">

我为下面无序列表的子节点创建了一个节点列表

<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>

我使用下面的javascript（如下）将节点列表与数组进行比较。目标是确定数组中哪些元素已经在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")}
            }
        }
    }

函数nodeinfo（）{
//这些是我们在ul中想要的ID
变量ID=['aa0'、'aa1'、'aa7'、'aa8']
var node=document.getElementsByTagName（'ul'）[0]；
var nodelist=node.childNodes；
//测试以查看数组ID是否在节点列表中
对于（var j=0；j而言，使用关联数组将更容易，而不是使用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);
    }
}

性能方面，第一个更好，因为从关联数组中查找是O（1）
（除非发生冲突），而indexOf
的最坏情况是O（n）
（这意味着它必须遍历整个列表，以确定键在最坏情况下是否存在）.
您需要支持哪些浏览器？如果您可以避免使用旧的IEs，那么像Array.filter这样的东西至少会对IE8及以上版本有所帮助……但出于好奇，您更喜欢IE6，为什么不支持jquery？（特别是如果您计划支持IE6-8。）如果需要确定哪些项需要位于DOM中，哪些项需要从DOM中删除（精确复制id数组）你最好只运行ID数组，每次创建一个新的列表。最终结果相同，逻辑更少。我处于学习模式，所以我更喜欢使用纯javascript而不是jquery。非常好。谢谢。创建一个函数来将ID数组转换为关联数组有意义吗？还是很绿色的使用对象，但我正在努力解决它。@WilliamSmith这是获得id的唯一方法吗？作为数组？我将编辑我的解决方案，向您展示如何使用数组。目前，我将把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);
    }
}

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