Trabajar con relaciones de nodo a código con javascript

árboles DOM HTML se parecen a los árboles de la familia en la relación jerárquica entre nodos. De hecho, los términos técnicos utilizados por los programadores de javascript para describir las relaciones entre los nodos en un árbol toman sus nombres de las relaciones familiares.

  • Todos los nodos, excepto el nodo raíz, tiene una padre.

  • Cada nodo puede tener cualquier número de niños.

  • Los nodos con el mismo padre son hermanos.

Dado que los documentos HTML a menudo tienen múltiples elementos que son del mismo tipo, el DOM permite acceder a los distintos elementos en una lista de nodos utilizando un número de índice. Por ejemplo, se puede hacer referencia a la primera

elemento de un documento como p [0], y el segundo

nodo de elemento como p [1].

Aunque una lista de nodos puede verse como una matriz, no lo es. Puede recorrer el contenido de una lista de nodos, pero no se puede utilizar métodos de arreglos en las listas de nodos.

En este código, los tres

elementos son todos los hijos del elemento. Debido a que tienen el mismo padre, que son hermanos.

La familia de HTML

primero

El DOM HTML también proporciona un par de palabras clave para navegar por los nodos utilizando sus posiciones en relación con sus hermanos o padres. Las propiedades relativas son

  • primer hijo: Hace referencia al primer hijo de un nodo

  • último niño: Hace referencia al último hijo del nodo

  • nextSibling: Hace referencia al siguiente nodo con el mismo nodo padre

  • previousSibling: Hace referencia al nodo anterior con el mismo nodo padre

Video: ¿Qué hace un Lic. en Relaciones Internacionales?

Este ejemplo muestra cómo se pueden utilizar estas propiedades relativas a recorrer el DOM.

Iguanas no son divertidas

Las iguanas son ninguna diversión a estar alrededor. Usa los enlaces de arriba para obtener más información.

Observe que todo el espaciamiento debe ser retirado entre los elementos dentro de la

elemento para que el primer hijo y último niño propiedades para acceder a los elementos correctos que desea seleccionar y estilo.

Esto es lo que el documento se ve como cuando previamente en un navegador. Tenga en cuenta que sólo los primeros y los últimos eslabones de la navegación están en negrita.

Vista previa del código en un navegador.
Vista previa del código en un navegador.

Este es un ejemplo del uso del DOM para realizar un cambio en los elementos existentes dentro del documento. Este método de elementos seleccionando casi nunca se utiliza. Es demasiado propenso a errores y demasiado difícil de interpretar y utilizar.