Question

我正在使用getElementsByClassName找到类名的所有元素，如下所示：

var elements = document.getElementsByClassName('myclass');

我希望遍历所有元素，包括孩子的孩子，所有元素。

我现在正在做的是：

for(var i=0; i< elements.length; i++) elements[i].children[0];

但这并不好，因为它不会遍历包括儿童在内的所有元素。我不知道父子树。

如何遍历父元素的所有元素，包括子元素。

Answer 1

通用方式：

var recursive = function (element) {
// some stuff with element
console.log(element);
// check if children
var children = element.children;
if (children) {
    for(var i=0; i< children.length; i++) { 
        // apply recursion on each child
        recursive(children[i]);
    }
}
}

var elements = document.getElementsByClassName('postcell');

for(var i=0; i< elements.length; i++) { 
 recursive(elements[i]);
}

Answer 2

element.getElementsByTagName('*')将为您提供元素的所有后代元素。

或者，您可以递归使用children。

Answer 3

你可以试试这个：

var elements = document.body.getElementsByTagName("*");
var eleMyClass = new Array();
var j=0;
for(i=0; i<elements.length; i++){
    if(elements[i].className=="myclass"){
    eleMyClass[j]=elements[i];
    j++;
    }
}

现在数组 eleMyClass 包含类名myclass

的元素列表

Answer 4

使用getElementsByTagName('*')你可以像这样安排你的代码，这样你就可以在里面有一个嵌套循环和一个变量elm，它指向当前节点，让你可以对它进行处理。

var elements = document.getElementsByClassName('myclass'),
    i, j, nodes, elm;

for (i = 0; i < elements.length; ++i) {
    nodes = Array.prototype.slice.call(elements[i].getElementsByTagName('*'));
    nodes.unshift(elements[i]);
    for (j = 0; j < nodes.length; ++j) {
        elm = nodes[j];
        // work with elm
    }
}

如果您只想return所有元素的数组，您可以concat 数组我拨打了nodes而不是第二个for

遍历getElementsByClassName返回的元素

4 个答案: