Сценарии DOM getElementsByClassName (для ссылок)

Question

Я практикую DOM Scripting (никаких реальных проблем, скорее практика и теория, я знаю, как этого добиться с помощью jQuery, конечно) Итак, я пытаюсь улучшить и понять следующее:

У меня есть несколько ссылок на классы, и я прилагаю к ним событие:

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

Это отлично работает. Я получил это из книги в основном. Теперь я хочу улучшить его, используя getElementsByClassName. Я продолжал писать:

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

Но я получил ошибку: Uncaught TypeError: Object # не имеет метода 'getElementsByClassName'

Очевидно, что ссылки - это NodeList, поэтому я не могу использовать для них getElementsByClassName. Что я на самом деле не понимаю ... Можете ли вы помочь, как я мог это сделать, и хороша ли первая версия скрипта? (производительность мудрая). Благодарю.

Answer 1

Вы не можете использовать функции getElement * для такой фильтрации друг друга, потому что они не работают со списками и в любом случае не возвращают исходный узел в своих результатах. Если вам нужно одновременно фильтровать более одного условия, используйте querySelectorAll, например, document.querySelectorAll("a.popup").

Answer 2

Первая версия в порядке, но вы можете увидеть улучшение, если получите элементы по имени класса first , затем отфильтруете их по имени тега, если на самом деле вам даже нужно, чтобы они были отфильтрованы по имени тега , Если класс popup будет использоваться только для ссылок, getElementsByTagName не требуется, и ваш сценарий ускорится, если вы, конечно, удалите его.