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

但是我收到了错误：未捕获的TypeError：Object＃没有方法'getElementsByClassName'

显然链接是NodeList，因此我不能在其上使用getElementsByClassName。我真的不明白...... 你能帮忙我怎么做，以及脚本的第一个版本是否良好？（表现明智）。谢谢。

Answer 1

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

Answer 2

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

DOM脚本getElementsByClassName（用于链接）

2 个答案: