5 DOM Flashcards
¿Qué es el DOM?
Es el Objeto modelo creado por el navegador, del Documento HTML que interpreta, incluso crea un árbol jerárquico de cada una de las partes de dicho documento.
Document.querySelector()
Devuelve el primer Elemento que Concuerde con el Query.
Ej: document.querySelector(“body”);
Document.querySelectorAll()
Devuelve una NodeList que luce como un arreglo, con todos objetos que coinciden con el Query.
Element.getElementsByClassName()
Devuelve un objeto tipo arreglo de todos los nodos o child-elements que concuerden con el query.
Nota: no es recomendable usalo.
Document.getElementById()
Devuelve una referencia al elemento por su ID
Element.className()
La propiedad .ClassName obtiene y establece el valor del atributo class del elemento especificado.
Nota: Si la clase que quiero modificar, tiene adjuntos muchos otros elementos con sus propias clases, usar esta propiedad afectará a todos los elementos adjuntos al que estoy modificando y que tengan su propia clase.
NOTA: no usar esta función en JS FRAMEWORKS y tener mucho cuidado si la voy a usar en otras cosas.
Element.classList()
Esta propiedad devuelve un (DOMTokenList) arreglo que enlista todo lo que contiene el elemento de la clase.
Element.classList() MÉTODOS
1# ADD (añade clase)
EJ:div.classList.add(“anotherclass”)
2# REMOVE (remueve clase)
EJ:div.classList.remove(“foo”)
3# TOGGLE (Si la clase indicada está en elemento, la eliminará, y si no está, la añadirá)
EJ: div.classList.toggle(“visible”)
4# REPLACE (Reemplaza la clase)
EJ: div.classList.replace(“foo”, “bar”)
5# CONTAINS (Comprueba si la clase existe)
EJ: alert(div.classList.contains(“foo”))
Element.attributes
Es una propiedad que devuelve un NamedNodeMaps, no un array, así que no se pueden usar métodos de array con esta propiedad. La razón de esto es que, un atributo es una pieza de data más compleja porque tiene un key y un value pero podemos modificar una, la otra, o ambas cosas a la vez.
Element.attributes MÉTODOS
1# .hasAttribute(“src”)
Devolvería true si src existe en img.
2# .getAttribute(“src”)
Devolvería el contenido del atributo, que en este caso sería su enlace url.
3# .setAttribute(“alt”, “a drawing of a backpack”)
Esta propiedad me permite agregar un atributo y/o agregar un valor a un atributo. Primero va el atributo entre “” separado por coma, y luego va el valor.
4# .removeAttribute(“src”)
Me permite remover el atributo.
Como las clases son atributos, estos métodos también podrían usarse para manipular clases.
Propiedad .style
El objeto .style, contiene todas las propiedades de estilo CSS aplicables para el elemento que se está consultando.
Ej: document.querySelector(“.site title”).style
También puedo consultar una propiedad específica del estilo CSS del elemento señalado, usando dot notation.
Ej: document.querySelector(“.site title”).style.backgroundColor
Ej: document.querySelector(“.site title”).style.backgroundColor = “verde”
Document.createElement()
Este método permite crear en el DOM un nuevo contenido HTML sin destruir el anterior.
ParentNode.append()
Este método toma el Parent Node y añade uno o varios elementos separados por coma, que se le indiquen, al final (last child) de ese Parent Node. También se puede usar para añadir un string de texto.
ParentNode.prepend()
Tiene la misma forma que el método Append pero añade el elemento o los elementos indicados, al principio (first child) del Parent Node.
Node.appendChild()
Me permite mover el elemento de un lugar a otro en el DOM.
