Question

我正在学习javascript并练习遍历DOM我创建了一个方法，该方法根据＆＃39; nodeName＆＃39;返回父元素数组。我这样做是为了让我可以选择所有某个元素（也就是另一个元素的父元素）并对它们进行样式处理或更改它们等等。

Element.prototype.specificParent = function(nodeName1) {
    nodeName1 = nodeName1.toUpperCase();
    var x = this;
    var matches = [];
    var allParents = [];

    while(x.parentNode !== null) {
        allParents.push(x.parentNode);
        x = x.parentNode;
    }

    for(i = 0; i < allParents.length; i++) {
        if(allParents[i].nodeName === nodeName1) {
            matches.push(allParents[i]);
        }
    }

    return matches;

}

这种，有一种，有我想要的效果。但是，要访问返回数组中的所有元素，我需要使用类似for循环的东西，因为我只能访问这样的元素：

var parents = document.getElementById("startHere").specificParent("div"); //gets all parent div elements and returns the array  

//I can then style them individually:
parents[0].style.background = "black";
parents[1].style.background = "black";
//etc, etc, etc

//or I could use a for loop to style them all:
for(i = 0; i < parents.length; i++) {
    parents[i].style.background = "black";
}

我想做的是：

var parents = document.getElementById("startHere").specificParent("div");
parents.style.background = "black"; //changing all the elements in the array

有没有办法改变＆＃34; specificParent＆＃34;方法让它允许这个？

这似乎是一种毫无意义的运动，但我正在学习！

由于

Answer 1

可能最简单的方法是使用arrays API 如果你可以使用ES6，它会是这样的：

parents.forEach(parent => parent.style.background = "black")

在ES5中略显清晰：

parents.forEach(function(parent) { parent.style.background = "black"; })

根据您的评论，您可以这样做：

Element.prototype.specificParent = function(nodeName1) {
    nodeName1 = nodeName1.toUpperCase();
    var x = this;
    var matches = [];
    var allParents = [];

    while(x.parentNode !== null) {
        allParents.push(x.parentNode);
        x = x.parentNode;
    }

    for(i = 0; i < allParents.length; i++) {
        if(allParents[i].nodeName === nodeName1) {
            matches.push(allParents[i]);
        }
    }

    function setStyle(styleKey, styleValue) {
        matches.forEach(function(parent) { parent.style[styleKey]= styleValue; });
    }

    return {
        elements : matches,
        setStyle : setStyle
    };
}

并像这样使用它：

var parents = document.getElementById("startHere").specificParent("div");
parents.setStyle("background", "black");

访问数组中的所有元素

1 个答案: