Tipos de nodos DOM: document, element, text, attribute, comment. Arbol de nodos para JavaScript (CU01124E)

Resumen: Entrega nº24 del curso "Tutorial básico del programador web: JavaScript desde cero".
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”.

 

logo javascript

 

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:

arbol de nodos DOM JavaScript

 

 

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.

¿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
 

JULIO - AGOSTO 2017

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


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