Question

I am practicing DOM Scripting (no real-life problem but rather practice and theory, I know how to achieve this with jQuery of course)
So, I am trying to improve and understand the following:

I have some links with classes and I am attaching event on them:

<a href="http://www.google.com" class="popup">click</a>
<a href="http://www.test.com" class="popup">click2</a>
<a href="http://www.abc.com" class="popup">click3</a>
<a href="http://www.google.com" class="no">click4</a>

Javascript:

window.onload = prepareLinks;

function prepareLinks() {
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        if (links[i].getAttribute("class") == "popup") {
            links[i].onclick = function () {
                popUp(this.getAttribute("href"));
                return false;
            }
        }
    }
}


function popUp(winURL) {
    window.open(winURL, "popup", "width=320,height=480");
}

That works fine. I got it from a book basically. Now I want to improve it by making use of getElementsByClassName. I went on to write:

window.onload = prepareLinks;

function prepareLinks() {
    var links = document.getElementsByTagName("a");
    var popups = links.getElementsByClassName("popup");
    for (var i = 0; i < popups.length; i++) {
        popups[i].onclick = function () {
            popUp(this.getAttribute("href"));
            return false;
        }
    }
}


function popUp(winURL) {
    window.open(winURL, "popup", "width=320,height=480");
}

But I got error:
Uncaught TypeError: Object # has no method ‘getElementsByClassName’

Apparently links is a NodeList so I can’t use the getElementsByClassName on it. Which I don’t really understand…
Can you help on how I could do this, and whether or not the first version of the script is good? (performance wise). Thanks.

Answer 1

You can’t use getElement* functions to filter each other like that, because they don’t operate on lists, and they don’t return the original node in their results anyway. If you need to filter on more than one condition simultaneously, use querySelectorAll instead, e.g. document.querySelectorAll("a.popup").