JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing
Ocultar un elemento
el.style.display = 'none';Mostrar un elemento
el.style.display = '';Librerías útiles
Añadir una clase
el.classList.add(className);Verificar una clase
el.classList.contains(className);Eliminar una clase
el.classList.remove(className);Alternar una clase
el.classList.toggle(className);Remplazar una clase
element.classList.replace('old', 'new');Insertar contenido despues de un elemento (after)
el.insertAdjacentHTML('afterend', "<h1>Nuevo contenido</h1>");Insertar contenido antes de un elemento (before)
el.insertAdjacentHTML('beforebegin', "<h1>Nuevo contenido</h1>");Insertar contenido al final del propio elemento (append)
elementParent.appendChild(el);Insertar contenido al principio del propio elemento (prepend)
elementParent.insertBefore(el, elementParent.firstChild);Acceder al elemento Hijo
el.childrenAcceder al elemento Padre
el.parentNodeEliminar un elemento
el.parentNode.removeChild(el);Verificar si un elemento contiene un selector
el.querySelector(selector) !== nullBuscar elementos dentro otro Elemento
el.querySelector(selector)
el.querySelectorAll(selector)Cambiar/modificar/borrar el texto de dentro de un elemento
el.textContent = string;Cambiar/modificar/borrar el html de dentro de un elemento
el.innerHTML = string;Cambiar/modificar/borrar el html de un elemento
el.outerHTML = string;Retornar los valores de un atributo
el.getAttribute('tabindex');Cambiar/modificarlos valores de un atributo
el.setAttribute('tabindex', 3);Borrar los valores de un atributo
element.removeAttribute('href');Verificar si existe un atributo en un elemento
element.hasAttribute('href');- How To Traverse the DOM
- How To Make Changes to the DOM
- How To Modify Attributes, Classes, and Styles in the DOM
- La renderización de la pagian espera hasta tener cargadas todas sus dependencias (src, href, etc..)
- La recomendación de cargar los scripts al final del body sigue vigente
- Otra forma de aliviar este peso es cargar scripts y multimedia haciendo uso de AJAX
- Otra forma de gestionar esto para proyectos grandes es usar Requirejs, Browserify y demás...
asyncydefervienen al rescate s
<script src="fichero1.js" async></script>
//Carga fichero1.js sin interferir en el renderizado del DOM
<script src="fichero2.js" defer></script>
//Carga fichero2.js después de haberse descargado.
Recursos
Core
Temas
- Themes built by or reviewed by Bootstrap's creators
- Flat UI
- bootswatch
- 75+ Free Bootstrap HTML5 Website Templates
- 45 Free Bootstrap Themes For Creating A Professional Website
Componentes de UI