javascript - DOM 脚本 getElementsByClassName(用于链接)

Question

我正在练习 DOM 脚本(没有现实生活中的问题，而是实践和理论，我当然知道如何使用 jQuery 来实现)因此，我正在尝试改进和理解以下内容:

我有一些与类(class)的链接，我正在为它们附加事件:

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

但是我得到了错误:未捕获的类型错误:对象 # 没有方法 'getElementsByClassName'

显然 links 是一个 NodeList，所以我不能在其上使用 getElementsByClassName。我真的不明白...你能帮助我如何做到这一点，以及脚本的第一个版本是否好？ (性能明智)。谢谢。

Answer 1

您不能像那样使用 getElement* 函数来相互过滤，因为它们不对列表进行操作，而且它们也不会在结果中返回原始节点。如果您需要同时过滤多个条件，请改用 querySelectorAll，例如document.querySelectorAll("a.popup")。