Obtener elemento hijo en JavaScript
Este artículo explica cómo obtener los nodos secundarios del cuerpo de una página web en HTML usando JavaScript.
Obtenga los nodos secundarios del cuerpo de una página web en HTML usando JavaScript
Obtener un hijo de un nodo usando JavaScript significa acceder a toda la página y colocarla en un array. Es importante recordar que los espacios en blanco se consideran nodos de texto en la página web.
En el caso de los espacios en blanco, el navegador desactualizado lo trata de manera diferente. Algunos de ellos son considerados como childNodes y otros como niños como Internet Explorer inferior a la versión 8.
<!DOCTYPE html>
<html>
<body>
<!-- we are writing a comment node! -->
<p>Click GET NODES button to get child nodes.</p>
<button onclick="getMyWebPageChildNodes()">GET NODES</button>
<p id="results"></p>
<script>
function getMyWebPageChildNodes() {
var myChildsNode = document.body.childNodes;
var textMessages = "";
var i;
for (i = 0; i < myChildsNode.length; i++) {
textMessages = textMessages + myChildsNode[i].nodeName + "<br>";
}
document.getElementById("results").innerHTML = textMessages;
}
</script>
</body>
</html>
En el código anterior, creamos un botón y configuramos un oyente en ese botón llamado onClick.
Ponemos una acción en el onclick llamada getMyWebPageChildNodes. Creamos un array llamada myChildsNode y almacenamos todos los nodos secundarios en esta función.
Después de eso, creamos una variable textMessages en la que almacenamos los nodos sin comentarios. Se crea una variable counter para iterar el array myChildsNode.
Hicimos un bucle for en el que buscamos el nombre de todos los nodos presentes en nuestra página web y luego lo almacenamos en la variable textMessages. Una vez hecho esto, obtendrá todos los nombres de los nodos y el bucle for terminará.
Aquí asignamos estos nodos a nuestra etiqueta de párrafo id=resultados. Finalmente, obtenemos todos los nodos hijos en una etiqueta de párrafo.