trisquel

Aprende JavaScript con ejemplos (XXI). El DOM de HTML (I).

Como ya hemos visto, JavaScript puede acceder al DOM (Document Object Model) de cualquier página web.

Veamos un ejemplo visual del DOM:
DOM

Al contrario que las páginas HTML estáticas, con JavaScript puedes hacer que tu web sea dinámica cambiando el contenido HTML de cualquier elemento, cambiando el estilo CSS de la misma, reaccionar a los eventos del DOM o incluso añadir o eliminar elementos HTML de tu web.

Según el W3C, el DOM es una plataforma e interfaz de un documento que permite a los scripts y programas acceder y modificar dinámicamente su contenido, estructura y estilo.

Ya al principio del curso vimos cómo se podía acceder al DOM y modificar su contenido. Recordamos uno de los primeros ejemplos:


<!DOCTYPE html>
<html>
<body>
<h1>Modificando el código HTML</h1><p id=”prueba”>Modificando el contenido.</p><button type=”button”
onclick=”document.getElementById(‘prueba’).innerHTML = ‘CAMBIANDO el contenido!’”>
¡Dale!</button>

</body>
</html>

Para ello utilizábamos el método getElementByID() que nos permitía obtener el identificador (id) de un elemento html, en este caso el elemento “prueba”.

Además para cambiar el contenido de un elemento HTML utilizábamos la propiedad innerHTML la cual nos permitía cambiar el contenido de un elemento HTML. innerHTML permite cambiar el contenido de cualquier elemento inclusoy.

Además de buscar elementos por el id podemos buscar elementos por el tag (utilizando el método getElementsByTagName() ) o también por la clase (utilizando el método getElementsByClassName() ).

Ejercicio 21.1:

Prueba y verifica si el siguiente código funciona:

var a = document.getElementById(“texto”);
var b = a.getElementsByTagName(“strong”);

En caso afirmativo, describe qué es lo que hace.

Veamos un ejemplo más completo de utilización del DOM con JavaScript. Aquí tienes un ejemplo de test sobre nomofobia. Compruébalo y observa cómo funciona.

<!DOCTYPE html>
<html>
<body>

<form id=”frm1″>

<ol>
<input type=”checkbox” name=”nomo” >
<strong>1.</strong> Cuando mandas un mensaje por whatsapp esperas siempre al doble check. Si no aparece vuelves a abrir el terminal para revisarlo al rato.</ol>

<ol>
<input type=”checkbox” name=”nomo” >
<strong>2.</strong> Antes de acostarte siempre miras el móvil a ver si tienes mensajes o notificaciones.</ol>

<ol>
<input type=”checkbox” name=”nomo” >
<strong>3.</strong> Te despiertas antes de tiempo para jugar, mandar mensajes, actualizar perfiles,… con el teléfono móvil.</ol>

<ol>
<input type=”checkbox” name=”nomo” >
<strong>4.</strong> Si sales de casa sin el móvil volverías a cogerlo aunque llegues tarde a tu cita.</ol>

<ol>
<input type=”checkbox” name=”nomo” >
<strong>5.</strong> Tienes miedo a quedarte sin batería.</ol>

<ol>
<input type=”checkbox” name=”nomo” >
<strong>6.</strong> Cuando tienes la batería baja desactivas ciertas aplicaciones u opciones del teléfono como la WiFi, bluetooth para no quedarte sin batería.</ol>

<ol>
<input type=”checkbox” name=”nomo” >
<strong>7.</strong> Tienes ansiedad cuando tienes llamadas perdidas. Llamas a los números y te preocupas si no responden.</ol>

<ol>
<input type=”checkbox” name=”nomo” >
<strong>8.</strong> Miras la cobertura cuando estas en algún sitio con los amigos, esperando, etc.</ol>

<ol>
<input type=”checkbox” name=”nomo” >
<strong>9.</strong> Sueles hacer alguna otra cosa mientras que miras al móvil como comer, lavarte los dientes, etc.</ol>

<ol>
<input type=”checkbox” name=”nomo” >
<strong>10.</strong> Vas al baño siempre con el móvil.</ol>
<br><br>
</form>

<p>Recuerda marcar todas las cuestiones arriba expuestas que creas que siempre realizas.</p>

<button onclick=”myFunction()”>Comprueba si sufres nomofobia</button>

<h3><p id=”resultado”></p></h3>
<h4><p id=”consejo”></p></h4>

<script>
function myFunction() {
var cont=0
var x = document.forms["frm1"];
var text = “”;
var i;
for (i = 0; i < x.length ;i++) {
if (x.elements[i].checked){ cont++; }
}

document.getElementById(“resultado”).innerHTML = “Resultado: En principio no tienes nada de que preocuparte.”;
document.getElementById(“consejo”).innerHTML = “Resultado: En principio no tienes nada de que preocuparte.”;

if (cont>5){
document.getElementById(“resultado”).innerHTML = “Resultado: Empiezas a tener signos de dependencia del móvil. “;
document.getElementById(“consejo”).innerHTML =” Consejo: Puedes utilizar técnicas como apagar el móvil cuando no lo necesitas, cuando duermes, etc.”;
}

if (cont>6){
document.getElementById(“resultado”).innerHTML = “Resultado: Tienes una gran dependencia del móvil. “;
document.getElementById(“consejo”).innerHTML = “Consejo:Deberías seguir un plan de <strong>desintoxicación</strong> del móvil como por ejemplo dejar el móvil en casa cuando vas a comprar, apagarlo durante la noche, apagarlo durante horas de clase o trabajo, etc.”;
}

if (cont>8){
document.getElementById(“resultado”).innerHTML = “Resultado: Tus síntomas de dependencia son muy preocupantes. “;
document.getElementById(“consejo”).innerHTML = “Consejo: Además de todas las técnicas de los apartados anteriores deberías plantearte un plan de desintoxicación del móvil que consista en estar una o dos semanas sin utilizarlo. Si ves que no puedes hacerlo por ti mismo, pide ayuda a un profesional.”;
}
}
</script>

</body>
</html>

Ejercicio 21.2:

Prueba y verifica si el código anterior funciona.
Crea otro text para verificar si un alumno esta sufriendo “bulling”.

Crear HTML de forma dinámica

El HTML es un flujo de información y etiquetas que fluye desde el servidor hasta el cliente y por lo tanto sería posible que un script de forma dinámica añadiera más etiquetas e información a ese flujo. Veamos un ejemplo de esto que estamos contando:

Ejemplo:
<!DOCTYPE html>
<html>
<body><strong>Bienvenidos….</strong>
<script>
document.write(“Myfpschool.com”);
</script>

</body>
</html>

Ejercicio 21.3:

Modifica el código anterior para que el mensaje Myfpschool.com aparezca después de pulsar un botón.
¿Qué es lo que ha ocurrido?

Cambiar el estilo de forma dinámica

<!DOCTYPE html>
<html>
<body>

<h1 id=”titulo”>MyFPSchool</h1>

<script>
document.getElementById(‘titulo’).style.color = ‘red’;
<script>

</body>
</html>

Ejercicio 21.4:

Modifica el código anterior para que el cambio de estilo ocurra cuando se pulse un botón.

Resumen
Nombre del artículo
Aprende JavaScript con ejemplos (XXI). El DOM de HTML (I).
Autor
Descripción
Aprender JavaScript con ejemplos. El DOM de HTML

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>