Añadiendo y quitando una clase de CSS a un nodo del DOM

Podemos utilizar el método .toggle(); para añadir y quitar una clase de CSS a un nodo del DOM, esta es la sintaxis, teniendo como ejemplo: <style> .purple { background: purple; } <style> <div class=”elDiv” id=”elDiv”> Usamos de esta forma: elDiv.classList.toggle(‘purple’); En este caso se hará toggle con la clase .purple a el DIV con la clase elDiv. Otra cosa que podemos hacer es hacerlo manualmente, … Continúa leyendo Añadiendo y quitando una clase de CSS a un nodo del DOM

Creando nodos y agregándolos al DOM

Podemos crear nodos y agregarlos al DOM en JavaScript. Cabe mencionar que los nodos no se agregan como etiquetas de HTML directamente, si no que se agregan a un DOM Virtual, creando un objeto que simula un nodo del DOM el cual se agrega al DOM regular. Para crear un nuevo nodo usamos el método document.createElement(); con la siguiente sintaxis: var nuevoNodo = document.createElement(‘div’); En … Continúa leyendo Creando nodos y agregándolos al DOM

Modificando el estilo CSS de nodos del DOM

Podemos cambiar el estilo CSS de cualquier nodo del DOM mediante JavaScript. Para esto solo tenemos que seleccionar el nodo deseado y modificar sus propiedades para que reflejen lo que se necesita. Dado el ejemplo: < div class=”azul” id=”azul”> </div > < div class=”rojo” id=”rojo”> </div > .azul { width: 100px; height: 100px; background-color: blue; margin-bottom: 20px; } .rojo { width: 100px; height: 100px; background-color: … Continúa leyendo Modificando el estilo CSS de nodos del DOM

Obteniendo información de un nodo del DOM con dir( );

Como sabemos, todo el contenido mostrado en una pagina se representa mediante nodos del Document Object Model, los cuales son objetos en si, por lo tanto tienen propiedades y métodos. Para conocer mas acerca de las propiedades de un nodo del  DOM, podemos usar la función dir(); Teniendo el siguiente código:  < div class=”azul” id=”azul”> </div > < div class=”rojo” id=”rojo”> </div > La sintaxis … Continúa leyendo Obteniendo información de un nodo del DOM con dir( );