Los objetos NodeList son la colección de Nodes, generalmente devueltos por propiedades como Node.childNodes y métodos como document.querySelectorAll(). Aunque NodeList no es una array real, es posible iterar sobre ella con la ayuda del método forEach() . NodeList también se puede convertir en una array real siguiendo los métodos.
Método 1: utilizando el método Array.prototype.slice.call() .
- Sintaxis:
const array = Array.prototype.slice.call(nodeList);
- Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>Hello geeks 1</p>
<p>Hello geeks 2</p>
<p>Hello geeks 3</p>
<p>Hello geeks 4</p>
<script>
// This is nodeList
const nodeList = document.querySelectorAll('p');
console.log(nodeList);
// Converting using Array.prototype.slice.call
const array1 = Array.prototype.slice.call(nodeList);
console.log(array1);
</script>
</body>
</html>
- Producción:
Método 2: Con la ayuda del método Array.from() .
- Sintaxis:
const array = Array.from(nodeList);
- Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>Hello geeks 1</p>
<p>Hello geeks 2</p>
<p>Hello geeks 3</p>
<p>Hello geeks 4</p>
<script>
// This is nodeList
const nodeList = document.querySelectorAll('p');
console.log(nodeList);
// Converting to array using Array.from() method
const array = Array.from(nodeList);
console.log(array);
</script>
</body>
</html>
- Producción:
Método 3: al usar la sintaxis extendida de ES6, permite que un iterable, como una expresión de array o una string, se expanda en lugares donde se esperan cero o más argumentos o elementos.
- Sintaxis:
const array = [ ...nodeList ]
- Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>Hello geeks 1</p>
<p>Hello geeks 2</p>
<p>Hello geeks 3</p>
<p>Hello geeks 4</p>
<script>
// This is nodeList
const nodeList = document.querySelectorAll('p');
console.log(nodeList);
// Converting using Spread syntax
const array1 = [...nodeList];
console.log(array1);
</script>
</body>
</html>
- Producción:
Nota: Es posible que el Método 2 y el Método 3 no funcionen correctamente en navegadores más antiguos, pero funcionarán bien en todos los navegadores modernos.
Publicación traducida automáticamente
Artículo escrito por sanjeev2552 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA