Javascript DOM脚本GetElementsByCassName（用于链接）

我正在练习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");
}

window.onload=prepareLink；
函数prepareLink（）{
var links=document.getElementsByTagName（“a”）；
对于（变量i=0；i

那很好。我基本上是从一本书上得到的。现在我想通过使用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");
}

window.onload=prepareLink；
函数prepareLink（）{
var links=document.getElementsByTagName（“a”）；
var popups=links.getElementsByClassName（“弹出”）；
对于（变量i=0；i

但我有一个错误： 未捕获的TypeError:对象#没有方法“getElementsByClassName”

显然links是一个节点列表，所以我不能在上面使用getElementsByClassName。我真的不明白。。。

---

你能帮助我如何做到这一点，以及脚本的第一个版本是否好吗？（性能方面）。谢谢

第一个版本还可以，但是如果您先按类名获取元素，然后按标记名过滤元素，那么您可能会看到一个改进，如果您确实需要按标记名过滤元素的话。如果类

弹出窗口

只在链接上使用，

getElementsByTagName

是不必要的，当然，如果您删除它，您的脚本将加快速度。

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

querySelectorAll

，例如

document.querySelectorAll（“a.popup”）

链接[i]。如果锚点有两个或多个类，getAttribute（“class”）==“popup”

将不起作用。如果那些

.popup

锚点有一个共同的祖先，考虑事件委托。为每个锚点分配事件处理程序是您希望避免的事情。