CODEWITHSUNDEEP
javascripthtmlarraysdom
William Smith
William Smith

Reputation: 852

Comparing a NodeList to an Array of element id's

I created a NodeList for the childNodes of the unordered list below 

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

and I created an Array of element id's that I want to compare the NodeList to

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

and I used the following javascript (below) to compare the NodeList to the Array. The objectives are to determine which elements in the array are already in the DOM or need to be added to the DOM... AND to determine which elements currently in the DOM need to be removed so that I can append the UL to contain only the id's that are in the array. 

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")}
            }
        }
    }

currently I'm just showing alerts where I will reference appending the structure. Please note that I'm pretty new at this. I'm aware that NodeLists do not behave like arrays and that adjusting the DOM in the middle of this function would change the NodeList and probably screw everything up.

My questions are these: This seems kind of bulky, is there a more concise or robust approach to this objective? and is there any inherent danger in trying to adjust the DOM structure based on an array as I am showing here?

and please no jquery.

Thanks for your help

Upvotes: 0

Views: 1526

Answers (1)

Vivin Paliath
Vivin Paliath

Reputation: 95508

Instead having an array of id's it would be easier to use an associative array. This will make your second loop significantly less-cumbersome:

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);
    }
}

The if in the second loop can be changed to use an indexOf the following if you were using an array of id's:

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

Performance-wise the first one is better since lookup from an associative array is O(1) (unless you have a collision) whereas worst-case for indexOf is O(n) (meaning it has to go through the entire list to find out if the key exists in the worst case).

Upvotes: 1

Related Questions