Manejo de DOM
Navegar por nodos
Published in
3 min readMay 8, 2017
En DOM podemos navegar por los nodos gracias a JavaScript. Con él podemos crear nuevos Nodos, eliminar o modificar, para ello debemos tener claro la relación entre nodos:
- Cada elemento del Html es un nodo
- Los textos existentes en los elementos Html son nodos textos
- Cada atributo que existe en Html es un nodo atributo
- Todos los comentarios son nodos comentarios
Los nodos en los árboles de nodos tienen una relación jerárquica entre si. Esta relación es entre padre, hijos o hermanos:
- En nuestro árbol de nodos siempre tenemos un nodo padre, que también es llamado nodo raíz.
- Todos los nodos tienen un padre, a excepción del nodo raíz.
- Un nodo puede tener una cantidad de hijos
- Son nodos hermanos aquellos nodos que tienen el mismo padre
Del ejemplo anterior podemos decir que:
<html> es el nodo raíz y no tiene padre.<html> es el padre de <head> y <body><head> es e primer hijo de <html><body> es el ultimo hijo de <html><head> tiene un hijo <title><title> tiene un hijo, nodo texto (Navegando DOM)<body> tiene 2 hijos <H1> y <p><h1> tiene un hijo, nodo texto (Parentesco entre nodos)<p> tiene un hijo, nodo texto (Soy hijo de body)<h1> y <p> son hermanos.
También tenemos la opción de las siguientes propiedades para acceder a los nodos.
- .parentNode : selecciona el elemento padre de otro elemento
- .childNodes : retorna todos los hijos del padre elemento.
- .firstChild : retorna el primer nodo hijo de un elemento.
- .lastChild : retorna el ultimo nodo hijo de un elemento.
- .nextSibling : selecciona el siguiente hermano de un elemento.
- .previousSibling : selecciona el hermano anterior de un elemento.
Para crear nuevos nodos debemos seguir los siguientes pasos:
Paso 1 crear un nuevo nodo
- document.createElement() : crea un nodo elemento
- document.createAttribute() : crea atributo al elemento
- document.createTextoNode() : crea un nodo texto
- document.createComment() : crea un nodo comentario
Paso 2 se añade nodo creado
- .appendChild() : se utiliza para asignarle padre a un nodo
var boton = document.createElement('button');// creo el elemento botonvar texto = document.createTextNode("Guardar") // creo texto Guardarboton.setAttribute("type", "button"); //le doy atributos al botonboton.appendChild(texto); // asigno padre al texto que en este caso será boton.
Para eliminar un nodo se utiliza .removeChild()
boton.removeChild(texto); // elimino el hijo texto al botón Modificar atributos
- .getAttribute() : devuelve el valor del atributo especificado en un elemento.
Var atributo = elemento.getAttribute(nombredelatributo) - .setAttribute() : agrega o modifica el atributo de un elemento.
elemento.setAttribute(name, value) - .hasAttribute() : devuelve verdadero si existe el atributo especificado, de lo contrario falso.
elemento.hastAttribute(nombreatributo) - .removeAttribute() : elimina el atributo especificado.
elemento.removeAttribute(nombreatributo)- .classList() : devuelve el nombre de la clase de un elemento.
elemento.classList
