遍歷getElementsByClassName返回的元素

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