Codificación aprenderaprogramar.com: CU01124E
TIPOS DE NODOS EN EL DOM
Un navegador web crea una representación interna del código HTML como un árbol de nodos y a esto lo denominamos DOM (Document Object Model). Los nodos se pueden clasificar en diferentes tipos, dentro de los cuales los principales tipos son: document, element, text y “otros”.
Los principales tipos de nodos en el DOM son:
a) Document: el nodo document es el nodo raíz, a partir del cual derivan el resto de nodos.
b) Element: son los nodos definidos por etiquetas html. Por ejemplo una etiqueta div genera un nodo. Si dentro de ese div tenemos tres etiquetas p, dichas etiquetas definen nodos hijos de la etiqueta div.
c) Text: el texto dentro de un nodo element se considera un nuevo nodo hijo de tipo text (texto). Los navegadores también crean nodos tipo texto sin contenido para representar elementos como saltos de línea o espacios vacíos.
d) Attribute: los atributos de las etiquetas definen nodos, aunque trabajando con JavaScript no los veremos como nodos, sino que lo consideramos información asociada al nodo de tipo element.
e) Comentarios y otros: los comentarios y otros elementos como las declaraciones doctype en cabecera de los documentos HTML generan nodos.
Existen más tipos de nodos en el DOM, pero de uso más infrecuente.
Veamos un ejemplo de un fragmento de código:
<body> <div id="cabecera" class="brillante"> <h1>Portal web <span class="destacado">aprenderaprogramar.com</span>, para aprender</h1> <h2>Didáctica y divulgación de la programación</h2> </div> </body> |
Su representación indicando los tipos de nodos sería:
En la terminología de árboles, diremos que en este ejemplo el nodo body es padre (parent) y tiene un hijo (child) que es el nodo div. El nodo div tiene 2 hijos: h1 y h2. Por tanto h1 es el primer hijo (firstChild) del nodo div. A su vez el nodo h2 es hermano (sibling) de h1. El nodo h1 tiene 4 nodos hijos. El nodo de tipo texto aprenderaprogramar.com es un nodo hoja o nodo que no tiene hijos.
EJERCICIO
Crea el árbol de nodos DOM indicando los tipos de nodos y atributos para este código:
<body> <div id="menu" class="tenue"> <p> Bienvenidos </p> <h1>Portal web aprenderaprogramar.com</h1> <img name ="lagarto" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++ editor de texto"> </div> </body> |
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.