DOM 脚本 getElementsByClassName（用于链接）

Question

我正在练习 DOM 脚本（不是现实生活中的问题，而是实践和理论，我当然知道如何使用 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 # has no method 'getElementsByClassName'

显然 links 是一个 NodeList 所以我不能在它上面使用 getElementsByClassName 。我真的不太明白... 您能帮助我了解如何做到这一点以及该脚本的第一个版本是否良好？ （性能方面）。谢谢。

Answer 1

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

Answer 2

第一个版本很好，但如果您首先按类名获取元素，然后按标签名称过滤它们，如果实际上您甚至需要按标签名称过滤它们，您可能会看到改进。如果 popup 类仅用于链接，则不需要 getElementsByTagName，当然，如果删除它，您的脚本将会加速。