MI SEGUNDA CITA CON EL DOM, CONOCIÉNDOLO MÁS.

Ya sabemos que en Javascript gracias a getElementById tenemos un acceso inmediato a cualquier elemento tan sólo conociendo el valor de su atributo id.

Los nodos más importantes son:

• Document: representa el nodo raíz.
• Element: representa el contenido definido por un par de etiquetas de apertura y cierre y puede tener tanto nodos hijos como atributos.
• Attr: representa el atributo de un elemento.
• Text: almacena el contenido del texto que se encuentra entre una etiqueta de apertura y una de cierre.

Los otros tipos de nodos existentes que no se van a considerar son: DocumentType, CDataSection, DocumentFragment, Entity, EntityReference, ProcessingInstruction y Notation.

¿CÓMO ACCEDO A LOS NODOS?

DOM proporciona dos métodos alternativos para acceder a un nodo específico: acceso a través de sus nodos padre y acceso directo.

Podríamos ver el hecho de acceder a un nodo como si accediéramos a una “rama” del árbol. Si accedemos a una “rama” del árbol es posible manipular de forma sencilla la página: acceder al valor de un elemento, definir el valor de un elemento, mover un elemento de la página, crear y añadir nuevos elementos, etc.

En caso de que quisiéramos acceder a un nodo a través de su nodo padre, primero tendríamos que estar en el nodo “raíz” de la página y después a sus nodos hijos y a los nodos hijos de esos hijos y así sucesivamente hasta el último nodo de la rama terminada por el nodo buscado. Sin embargo, cuando se quiere acceder a un nodo específico, es mucho más rápido acceder directamente a ese nodo y no llegar hasta él descendiendo a través de todos sus nodos padre.

Ahora vamos a ver cómo accedemos directamente a nodos

• getElementById(id) :Devuelve el elemento HTML cuyo atributo id coincide con el parámetro indicado en la función (id).
• getElementsByName(name) : Obtiene todos los elementos cuyo atributo name sea igual al parámetro proporcionado (name).
• getElementsByTagName(tagname) : Obtiene todos los elementos de la página HTML cuya etiqueta sea igual que el parámetro(tagname) que se le pasa a la función.
• getElementsByClassName(className) : Devuelve una colección de todos los elementos en el documento con el nombre de la clase especificada, como un objeto NodeList.
• querySelector(selector) : Nos devuelve el primer elemento (selectorr) que cumple la condición
• querySelectorAll(selector) : Devuelve todos los elementos del documento que coincide con un selector CSS especificado(s), como un objeto NodeList.

¿CÓMO CREO NODOS?

• createElement(etiqueta): crea un nodo de tipo Element.
• createTextNode(contenido): crea un nodo de tipo Text que almacena el contenido textual de los elementos HTML.
• nodoPadre.appendChild(nodoHijo): añade un nodo como hijo de otro nodo.

¿CÓMO ELIMINO UN NODO?

Si queremos eliminar un nodo, la función a la que debemos recurrir es removeChild(), la cuál, requiere como parámetro el nodo que se va a eliminar. Y se le aplica al nodo padre.