JavaScript childnodes, parentNode, firstChild, last, nextSibling, children.length, childElementCount (CU01125E)

Resumen: Entrega nº25 del curso "Tutorial básico del programador web: JavaScript desde cero".
Codificación aprenderaprogramar.com: CU01125E

 

 

ACCESO A NODOS DEL DOM

Los navegadores web representan la página web en forma de árbol de nodos, por tanto tendremos que saber cómo acceder a dichos nodos para crear efectos dinámicos (cambios en los nodos) con JavaScript. Para ello JavaScript usa términos como childNodes, nodeType, nodeName, nodeValue, firstChild, lastChild, parentNode, nextSibling, previousSibling, etc. que vamos a estudiar.

 

logo javascript

 

Algunas de las palabras clave de las que disponemos en JavaScript para acceder a los nodos del DOM son las que enumeramos a continuación (veremos un ejemplo de código después):

Palabra clave

Significado

Ejemplo aprenderaprogramar.com

parentNode

Nodo padre de un nodo

...childNodes[1].childNodes[3].parentNode

childNodes

Array conteniendo los hijos de un nodo

document.childNodes[1].childNodes[1]

firstChild

Primer hijo de un nodo (empezando por la izquierda)

document.firstChild

lastChild

Ultimo hijo de un nodo (el más a la derecha)

document.childNodes[1].lastChild

nextSibling

Próximo nodo hermano (situado a la derecha)

document.childNodes[1].nextSibling

previousSibling

Anterior nodo hermano (situado a la izquierda)

...childNodes[2].childNodes[0].previousSibling

 

Palabra clave

Significado

Ejemplo aprenderaprogramar.com

nodoAccedido.children.length

Permite conocer el número de nodos hijo de un nodo

document.childNodes[1].children.length

nodoAccedido.atributo

Permite acceder al atributo de un nodo

...childNodes[1].childNodes[3].name

 

Palabra clave

Significado

Ejemplo aprenderaprogramar.com

nodeName

Etiqueta del nodo, como texto en mayúsculas (por ejemplo H1, DIV, SPAN…)

...childNodes[2].childNodes[0].nodeName

nodeType

Número que identifica el tipo de nodo (9 para document, 1 para element, 3 para text, 8 para comment)

document.nodeType

nodeValue

Contenido en forma de texto de un nodo de tipo text o de un nodo de tipo comment

...childNodes[2].childNodes[0].nodeValue

 

 

Para los nodos de tipo elemento hay invocaciones equivalentes (mismo efecto que la invocación general para un nodo cualquiera, pero sólo aplicables a nodos tipo elemento):

Invocación general

Equivalente para nodos tipo element

firstChild

firstElementChild

lastChild

lastElementChild

nextSibling

nextElementSibling

previousSibling

previousElementSibling

children.length

childElementCount

 

 

La mayor parte de los navegadores reconocen todas estas palabras claves, pero pueden existir navegadores (en especial los más antiguos) que no reconozcan algunas de ellas.

Como veremos más adelante, podemos acceder a un nodo usando JavaScript para hacer cambios dinámicos en el nodo. También podemos acceder a un nodo simplemente para mostrar algo por pantalla o recuperar alguna información. Por ejemplo:

Alert ('El nombre del nodo es: ' + document.childNodes[1].nodeName +' y el tipo del nodo es: '+ document.childNodes[1].nodeType + '\n\n');

Esta instrucción nos mostraría por pantalla el valor de nodeName y nodeType para el segundo nodo hijo de document (dado que el primero es document.childNodes[0]). En caso de que tratemos de invocar un nodo que no exista, se producirá un error y JavaScript no se ejecutará. No aparecerá ningún mensaje de error por pantalla, simplemente no se ejecuta JavaScript.

También podemos almacenar la referencia a un nodo en una variable. Por ejemplo:

var nodoBody = document.childNodes[1].childNodes[2];

Aquí estamos asignando el nombre de variable “nodoBody” a un nodo (suponemos que document.childNodes[1].childNodes[2] es una referencia válida a un nodo). Ahora podremos hacer uso de este nombre de variable como equivalente al nodo, por ejemplo:

alert ('Segundo hijo de nodo body es: ' + nodoBody.childNodes[1].nodeName +'\n\n');

¿Qué tipo de datos corresponde a la variable nodoBody? Cuando hablamos de tipos de datos en JavaScript dijimos que existían datos primitivos y objetos. En este caso, la variable es de tipo objeto. Los objetos podemos verlos como “algo” (estructura de datos) de naturaleza compleja. Ya hemos visto que los arrays podían ser considerados objetos especiales y lo mismo podemos decir de los nodos del DOM.

En los próximas epígrafes del curso veremos ejemplos de código para acceder a los nodos y modificarlos, de momento nos es suficiente con irnos familiarizando con la sintaxis y los conceptos básicos relacionadso con el DOM.

 

 

EJERCICIO

Crea el árbol de nodos DOM para el siguiente código:

<!DOCTYPE html>

<html><head><title>Ejemplo DOM - aprenderaprogramar.com</title><meta charset="utf-8">

</head>

<body>Texto en body

<div id="cabecera" class="brillante">

<h1>Portal web <span class="destacado">aprenderaprogramar.com</span>, para aprender</h1>

<img name ="lagarto" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">

</div>

<!-- Final del código--></body></html>

 

Para comprobar si tu respuesta es correcta puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

SEPTIEMBRE - OCTUBRE 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. .NET, C#
5. JavaScript, jQuery
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación