javascript - 是否可以通过属性值获取元素id并将属性设置为parentNode

Question

我试图通过href值获取一个元素，并获取该元素的parentNode，最后为parentNode设置一个属性。

这是解释我想要做什么的代码:

        var uri = "index.html"; //just for the example
        var elementA = document.querySelector("." + uri);
        var elementLi = elementA.parentNode;
        elementLi.setAttribute("class", "current-menu-item");

它所说的问题:未捕获的类型错误:无法读取 null 的属性“parentNode”

我读了一些与我类似的其他问题，但没有一个解决它。据我了解，querySelector 并未提供您可以在元素上执行的所有功能，因为此方法返回静态列表。

是否可以做我想做的事情？

如果我的问题不清楚，请发表评论并让我知道我会尽力改进问题

Answer 1

属性节点已弃用，只需使用 setAttribute method :

elementLi.setAttribute("class", "current-menu-item");

但是，您的实际问题是 elementLi 是 未定义，因为 elementA 不是元素节点 - querySelectorAll返回您需要循环的节点集合!

var uri = "index.html"; //just for the example
var elementsA = document.querySelectorAll("a[href="+JSON.stringify(uri)+"]");
for (var i=0; i<elementsA.length; i++) {
    var elementLi = elementsA[i].parentNode;
    elementLi.setAttribute("class", "current-menu-item");
}

如果您使用 querySelector 仅获取单个元素，它仍然可能为 null，因此最好检查一下:

var uri = "index.html"; //just for the example
var elementA = document.querySelector("a[href="+JSON.stringify(uri)+"]");
if (elementA) {
    var elementLi = elementA.parentNode;
    elementLi.setAttribute("class", "current-menu-item");
}