El método createNodeIterator() se usa para crear un iterador de Nodes y, por lo tanto, al usar ese iterador de Nodes podemos iterar sobre los Nodes.
Sintaxis:
const nodeIterator = document.createNodeIterator( root [, whatToShow [, filter ]]);
Parámetros:
- root : el Node raíz desde el que comienza el recorrido del iterador de Nodes.
- whatToShow (opcional): este es un argumento opcional que representa una máscara de bits creada al combinar las propiedades constantes de NodeFilter. Los siguientes son los posibles valores de la constante sin signo.
| Constante | Valor devuelto | Descripción constante |
| NodeFilter.SHOW_ALL |
1 |
Muestra todos los Nodes. |
| NodeFilter.SHOW_COMMENT |
128 |
Muestra Nodes de comentarios. |
| NodeFilter.SHOW_DOCUMENT |
256 |
Muestra los Nodes de documento. |
| NodeFilter.SHOW_DOCUMENT_FRAGMENT |
1024 |
Muestra los Nodes DocumentFragment. |
| NodeFilter.SHOW_DOCUMENT_TYPE |
512 |
Muestra los Nodes DocumentType. |
| NodeFilter.SHOW_ELEMENT |
1 |
Muestra los Nodes de elemento. |
| NodeFilter.SHOW_PROCESSING_INSTRUCTION |
64 |
Muestra los Nodes ProcessingInstruction. |
| NodeFilter.SHOW_TEXT |
4 |
Muestra Nodes de texto. |
- filtro (opcional): un objeto que implementa la interfaz NodeFilter. Exp, NodeFilter.FILTER_ACCEPT.
Valor devuelto: este método devuelve un iterador de Node.
Ejemplo: En este ejemplo, crearemos un iterador de Nodes usando este método y lo iteramos usando el método nextNode().
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML | DOM createNodeIterator() Method
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
HTML | DOM createNodeIterator() Method
</p>
<button onclick = "Geeks()">
Click Here
</button>
<p id="a"></p>
<script>
var a = document.getElementById("a");
function Geeks(){
const nodeIterator = document.createNodeIterator(
document.body,
NodeFilter.SHOW_ELEMENT
)
console.log(nodeIterator)
let nextNode=nodeIterator.nextNode();
nextNode=nodeIterator.nextNode();
a.innerHTML =
'Next Node content is : '+nextNode.textContent;
console.log(nextNode);
}
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
En la consola: en Consola se puede ver el iterador de Nodes y el siguiente Node.
Navegadores compatibles:
- Google Chrome
- Borde
- Firefox
- Safari
- Ópera
- explorador de Internet