Contenido principal
Curso: Programación de computadoras > Unidad 6
Lección 4: Modificación del DOM- Cambiar atributos
- Desafío: atributos de avatares
- Cambiar estilos
- Desafío: guía de estilo
- Cambiar clases de CSS
- Desafío: clasificación
- Establecer innerHTML y textContent
- Desafío: la historia interior
- Crear elementos desde cero
- Desafío: crea un sistema solar
- Resumen: técnicas de modificación del DOM
© 2024 Khan AcademyTérminos de usoPolítica de privacidadAviso de cookies
Resumen: técnicas de modificación del DOM
Modificar un elemento existente
Cubrimos varias maneras en las que puedes modificar los aspectos de un elemento existente:
Modificar atributos
Puedes establecer un atributo en un elemento al establecer la propiedad con el mismo nombre. Por ejemplo, para cambiar el
src de una <img>:imgEl.src = "http://www.dogs.com/dog.gif";Adicionalmente, también puedes utilizar el método
setAttribute, así:imgEl.setAttribute("src", "http://www.dogs.com/dog.gif");Si quieres quitar un atributo, debes hacerlo con
removeAttribute, como para quitar el atributo disabled de un botón, habilitándolo:imgEl.removeAttribute("disabled");Modificar estilos
Puedes cambiar estilos igual que como cambias los atributos, al acceder a la propiedad
style del elemento, y establecr la propiedad correspondiente. Por ejemplo, para cambiar el color:headingEl.style.color = "hotpink";Recuerda usar notación "camelCase" en los nombres de las propiedades de CSS de varias palabras, puesto que los guiones no son nombres de propiedad válidos en JS:
headingEl.style.backgroundColor = "salmon";Modificar nombres de clases
Para agregar una clase a un elemento, puedes establecer la propiedad
className:mainEl.className = "warning";Eso anulará las otras clases existentes, así que debes hacer esto en su lugar si solo quieres añadir a la lista de clases:
mainEl.className += " warning";En los navegadores más recientes, puedes utilizar la funcionalidad de
classList en su lugar:mainEl.classList.add("warning");Modificar HTML interno o texto
Para reemplazar por completo el contenido de un elemento con una cadena arbitraria de HTML, utiliza
innerHTML:mainEl.innerHTML = "los gatos son <strong>los más lindos</strong>";Si no necesitas pasar etiquetas HTML, debes utilizar
textContent en su lugar:mainEl.textContent = "los gatos son los más lindos";En general, debes tener cuidado al utilizar cualquiera de estas 2 propiedades, porque también eliminarán los detectores de eventos (los cuales enseñamos en la siguiente lección).
Crear elementos desde cero
Hay todo un conjunto de funciones que puedes utilizar para crear elementos completamente nuevos y agregarlos a la página.
Para crear un nuevo elemento, utiliza el acertadamente llamado
createElement:var imgEl = document.createElement("img");Para anexarlo a la página, llama
appendChild en el elemento padre de destino:document.body.appendChild(imgEl);Del mismo modo, también puedes utilizar
insertBefore, replaceChild, removeChild e insertAdjacentHTML.¿Quieres unirte a la conversación?
esta genial el curso muy practico y facil de entender(9 votos)
como unir dos div a un DOM(5 votos)
se me han dificultado unas tareas :((2 votos)
sirvio mucho y la pondre en practica(1 voto)- Desafio: Crea un sistema Solar
cual es la respuesta que me vuelvo loco intentando....
este es el codigo, cual es el error....
<script>
var planetEl = document.createElement("div");
planetEl.className= "planet";
planetEl.style.background = "blue";
document.body.appentChild(planetEl);
var moonEl = document.createElement("div");
moonEl.className = "moon";
moonEl.style.background = "red";
moonEl.appendChild(planetEl);
</script>(0 votos)