Question

I’m trying to parse a page with javascript to replace links belonging to a specific class with an iframe to open a corresponding wikipedia page [so that rather than having a link you have an embedded result]. The function detects links properly but something about the replaceChild() action causes it to skip the next instance… as if it does the first replace and then thinks the next link is the one it just worked on, probably as a result of the loop.

For example, if there’s 2 links on the page, the first will parse and the second will not even be seen but if there’s 3, the first two will be parsed using the attributes from the first and third.

Can anyone suggest an alternative way of looping through the links that doesn’t rely on a count function? Perhaps adding them to an array?

Sample Links

<a href="http://www.foo.com/" class="myspeciallinks" data-searcht="the hoover damn">wiki it</a>

Sample Javascript

(function(){    
    var lnks = document.getElementsByTagName("a");
    for (var i = 0; i < lnks.length; i++) {     
        lnk = lnks[i]; if(lnk.className == "myspeciallinks"){       
            newif=document.createElement("iframe");
            newif.setAttribute("src",'http://www.wikipedia.com');
            newif.style.width="500px";
            newif.style.height="100px";
            newif.style.border="none";
            newif.setAttribute("allowtransparency","true");
            lnk.parentNode.replaceChild(newif,lnk);     
        }   
    }   
})();

Answer 1

The problem here is that document.getElementsByTagName returns a NodeList and not an array. A NodeList is still connected to the actual DOM, you cannot safely iterate over its entries and at the same time remove the entries from the DOM (as you do when you replace the links).

You will need to convert the NodeList into an array and use the array for iteration:

(function(){    
    var lnksNodeList = document.getElementsByTagName("a");
    // create an array from the above NodeList and use for iteration:
    var lnks = Array.prototype.slice.call(lnksNodeList);
    for (var i = 0; i < lnks.length; i++) {     
        var lnk = lnks[i];
        if (lnk.className == "myspeciallinks") {       
            var newif = document.createElement("iframe");
            newif.setAttribute("src", 'http://www.wikipedia.com');
            newif.style.width = "500px";
            newif.style.height = "100px";
            newif.style.border = "none";
            newif.setAttribute("allowtransparency", "true");
            lnk.parentNode.replaceChild(newif, lnk);     
        }   
    }   
})();