javascript - first - Loop a través de childNodes

javascript next child

Question

Estoy intentando recorrer los nińos infantiles de esta manera:

var children = element.childNodes;
children.forEach(function(item){
    console.log(item);
});

Sin embargo, forEach Uncaught TypeError: undefined is not a function debido a forEach función. También trato de usar children lugar de childNodes pero nada cambió.

¿Alguien sabe lo que está pasando?

Answer 1

Aquí es cómo puedes hacerlo con for-in loop.

var children = element.childNodes;

for(child in children){
    console.log(children[child]);
}

Answer 2

Aquí hay una forma funcional de ES6 de iterar sobre un NodeList . Este método usa los Array para cada uno de los forEach :

Array.prototype.forEach.call(element.childNodes, f)

Donde f es la función de iterador que recibe un nodo hijo ya que es el primer parámetro y el índice como el segundo.

Si necesita iterar sobre NodeLists más de una vez, podría crear un pequeño método de utilidad funcional a partir de esto:

const forEach = f => x => Array.prototype.forEach.call(x, f);

// For example, to log all child nodes
forEach((item) => { console.log(item); })(element.childNodes)

// The functional forEach is handy as you can easily created curried functions
const logChildren = forEach((childNode) => { console.log(childNode); })
logChildren(elementA.childNodes)
logChildren(elementB.childNodes)

(Puede hacer el mismo truco para map() y otras funciones de Array).

Answer 3

La variable children es una instancia de NodeList y las NodeList s no son verdaderas Array y, por lo tanto, no heredan el método forEach .

También algunos navegadores realmente lo soportan nodeList.forEach

ES5

Puede usar slice desde Array para convertir NodeList en una Array adecuada.

var array = Array.prototype.slice.call(children);

También puede usar call para invocar forEach y pasarlo como NodeList como contexto.

[].forEach.call(children, function(child) {});

ES6

Puede usar el método de para convertir su NodeList en una Array .

var array = Array.from(children);

O también puede usar la sintaxis de propagación ... como tal

let array = [ ...children ];

Un truco que se puede usar es NodeList.prototype.forEach = Array.prototype.forEach y luego puede usar forEach con cualquier NodeList sin tener que convertirlos cada vez.

NodeList.prototype.forEach = Array.prototype.forEach
var children = element.childNodes;
children.forEach(function(item){
    console.log(item);
});

Consulte Una inmersión completa en NodeLists, Arrays, conversión de NodeLists y comprensión del DOM para obtener una buena explicación y otras formas de hacerlo.

Answer 4

Prueba con for loop. Da error en forEach porque es una colección de nodos nodelist .

O esto debería convertir node-list en array

function toArray(obj) {
  var array = [];
  for (var i = 0; i < obj.length; i++) { 
    array[i] = obj[i];
  }
return array;
}

O puedes usar esto

var array = Array.prototype.slice.call(obj);

Answer 5

Pruebe esto [recorrido de orden inverso]:

var childs = document.getElementById(''parent'').childNodes;
var len = childs.length;
if(len --) do {
    console.log(''node: '', childs[len]);
} while(len --);

O [en orden transversal]

var childs = document.getElementById(''parent'').childNodes;
var len = childs.length, i = -1;
if(++i < len) do {
    console.log(''node: '', childs[i]);
} while(++i < len);

Answer 6

Si haces mucho de este tipo de cosas, entonces valdría la pena definir la función por ti mismo.

if (typeof NodeList.prototype.forEach == "undefined"){
    NodeList.prototype.forEach = function (cb){
        for (var i=0; i < this.length; i++) {
            var node = this[i];
            cb( node, i );
        }
    };
}

Answer 7

element.lastChild.nextSibling === null muy tarde a la fiesta, pero desde element.lastChild.nextSibling === null , la siguiente parece ser la opción más directa para mí:

for(var child=element.firstChild; child!==null; child=child.nextSibling) {
    console.log(child);
}