El DOM es una representación estructurada de un HTML O XML como un árbol de objetos. Es la interfaz que permite que JavaScript el contenido, estructura y estilo de una pagina web.
conceptos claves
- Documento: La pagina HTML completa
- Nodos: Cada elemento del árbol DOM (etiqueta, texto, atributos)
-Elementos: Los nodos que representan etiquetas HTML >
-Árbol NODO: Estructura jerárquica donde cada elemento tiene un padre y puede tener hijos
2. ¿Para que se usa el DOM?
El DOM permite:
modificar contenido : cambiar texto HTML interno
manipular estructura: agregar eliminar o mover elementos
Cambiar estilos : Modificar CSS dinámica
Responder a eventos: Clicks, formularios, teclado, etc.
Crear interactividad: Hacer paginas web dinámicas.
3. Estructura del DOM
document
-html
-head
-title
-meta configuraciones
-body
-header encabezado de la pagina
-main parte principal
-section
-article
-footer
4. Seleccionar elementos del DOM
4.1 metodos de seleccion
javascript
// POR ID (DEVUELVE UN ELEMENTO)
Cómo se selecciona un elemento por clase desde HTML en JavaScript?
¿Para qué sirve la palabra reservada const?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="CAJA DE TEXTO " id="eliddemicaja">
<input type="button" value="boton" class="clasedeboton">
<li>TEXTO</li>
<input type="file" name="archivo" id="miarchivo" class="clasedearchivos">
<script>
console.log ("corriendo javascrpt");
const elemento = document. getElementById("eliddemicaja");
console.log(elemento);
const elemento1 = document.getElementsByClassName("clasedeboton");
console.log(elemento1);
const elemento2 = document. getElementsByClassName("li");
console.log(elemento2);
const elemento3 =document.getElementById ("miarchivo");
console.log(elemento3)
const elemento4 = document.getElementsByClassName ("clasedearchivos");
console.log(elemento4);
const elemento5 =document.getElementsByTagName("input:file");
console.log (elemento5);
</script>
</body>
</html>
El DOM es una representación estructurada de un HTML O XML como un árbol de objetos. Es la interfaz que permite que JavaScript el contenido, estructura y estilo de una pagina web.
PREGUNTAS FECHA 22 julio
Como se puede modificar una regla css desde javascript?
Modificando estilos en línea del elemento.
-
Agregando o cambiando clases CSS.
-
Editando directamente las reglas de una hoja de estilo.
¿Cuantas maneras conoce para invocar una función desde un click?
Desde el atributo onclick en HTML.
-
Asignando la función al evento onclick en JavaScript.
-
Usando addEventListener.
-
Usando librerías como jQuery.
¿Que eventos se pueden adicionar a un elemento?
Eventos de mouse (click, dblclick, mouseover, etc.)
-
Eventos de teclado (keydown, keyup, keypress)
-
Eventos de formulario (submit, change, focus, blur)
-
Eventos de carga (load, unload)
-
Eventos de entrada (input, paste)
-
Muchos otros, dependiendo del tipo de elemento.
Tomar captura de pantalla de: Ejecución y Código.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="boton ejemplo" id="idboton" onclick="cambiarcss()">
<style>
#idboton
{
color: blue;
background: white;
border-radius: 0px;
}
</style>
<script>
console.log("modificar reglas css")
function cambiarcss()
{
document.querySelector("#idboton").style.color="black"
document.querySelector("#idboton").style.borderRadius = "100px"
document.querySelector("#idboton").style.blackgroundColor="blue"
}
function funcion1()
{
console.log("mouse enter")
console.log("ha entrado el cursor al boton");
}
function funcion2()
{
console.log("el cursor ha dejado el elemento");
}
function funcion3()
{
console.log("click derecho")
}
const btn=document.getElementById("idboton")
btn.addEventListener('click', cambiarcss)
btn.addEventListener('mouseenter', funcion1)
btn.addEventListener('mouseleave', funcion2)
btn.addEventListener('contextmenu', funcion3)
</script>
</body>
</html>
05/07 martes
ACTIVIDAD.
Mediante el uso del DOM:
Los objetos html tienen un característica en la regla display la cual es none, mediante un botón realizar lo siguiente; al pasar el cursor por encima del botón mostrar una imagen al quitar el cursor la imagen debe desaparecer.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="boton ejemplo" id="idboton" onclick="cambiarcss()" >
<img src="https://cdn.pixabay.com/photo/2015/10/27/14/40/programming-1009134_640.jpg" alt="">
<style>
#idboton
{
color: blue;
background: white;
border-radius: 0px;
}
</style>
<script>
console.log("modificar reglas css")
function cambiarcss()
{
document.querySelector("#idboton").style.color="black"
document.querySelector("#idboton").style.borderRadius = "100px"
document.querySelector("#idboton").style.blackgroundColor="blue"
}
function funcion1()
{
console.log("mouse enter")
console.log("ha entrado el cursor al boton");
}
function funcion2()
{
console.log("el cursor ha dejado el elemento");
}
function funcion3()
{
console.log("click derecho")
}
const btn=document.getElementById("idboton")
btn.addEventListener('click', cambiarcss)
btn.addEventListener('mouseenter', funcion1)
btn.addEventListener('mouseleave', funcion2)
btn.addEventListener('contextmenu', funcion3)
</script>
</body>
</html>
codigo completo con la imagen utilizando
none
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Botón e Imagen</title>
<style>
#idboton {
color: blue;
background: white;
border-radius: 0px;
}
img {
display: none; /* La imagen comienza oculta */
width: 300px;
}
</style>
</head>
<body>
<input type="button" value="botón ejemplo" id="idboton">
<br><br>
<img src="https://cdn.pixabay.com/photo/2015/10/27/14/40/programming-1009134_640.jpg" alt="">
<script>
console.log("modificar reglas css");
function cambiarcss() {
const boton = document.querySelector("#idboton");
boton.style.color = "black";
boton.style.borderRadius = "100px";
boton.style.backgroundColor = "blue"; // corregido
}
function funcion1() {
console.log("mouse enter");
console.log("ha entrado el cursor al botón");
}
function funcion2() {
console.log("el cursor ha dejado el elemento");
}
function funcion3() {
console.log("click derecho");
}
function mostrarImagen() {
document.querySelector("img").style.display = "block";
}
function ocultarImagen() {
document.querySelector("img").style.display = "none";
}
const btn = document.getElementById("idboton");
// Eventos
btn.addEventListener('click', cambiarcss);
btn.addEventListener('mouseenter', funcion1);
btn.addEventListener('mouseleave', funcion2);
btn.addEventListener('contextmenu', funcion3);
// Mostrar y ocultar imagen según clic
btn.addEventListener('mousedown', mostrarImagen);
btn.addEventListener('mouseup', ocultarImagen);
</script>
</body>
</html>
..
<html lang="es">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Mostrar Imagen con DOM</title>
<style>
#BTN {
color: red;
background-color: yellowgreen;
border-radius: 1000px;
padding: 20px 20px;
font-size: 20px;
cursor: pointer;
}
z
#imagen {
display: none;
margin-top: 60px;
border: 2px solid #c41010;
}
</style>
</head>
<body>
<input id="BTN" type="button" value="Toca aqui" />
<script>
var btn = document.getElementById("BTN");
var img = document.getElementById("imagen");
btn.addEventListener("mouseenter", function() {
img.style.display = "block";
});
btn.addEventListener("mouseleave", function() {
img.style.display = "none";
});
</script>
</body>
</html>
Comentarios
Publicar un comentario