Guía de iniciación al manejo de DOM y el BOM con JavaScript
Capítulo 48: Introducción al DOM y BOM
Comenzamos la tercera parte del curso, la del manejo del navegador, documentos, etc.
Para ello, te voy a empezar a enseñar de que forma funciona el DOM y el BOM con JavaScript.
¿Qué es ECMAScript?
Empecemos con ECMAScript. Es el estándar que determina todas las normas de JavaScript.
Aquí puedes ver los estándares pasados, actuales y los que irán saliendo. Los documentos son muy técnicos, pero cuando sepas manejar JavaScript con soltura, te servirán para encontrar temas específicos.
Puedes descargarte cualquier estándar completo en PDF: Estándares.
Esto te lo explico más que nada porque pronto, deberás empezar a utilizar las referencias para obtener una mayor profundidad de lo que vayas necesitando.
¿Qué es el DOM?
El DOM, abreviatura que proviene del término en inglés Document Object Model (Modelo de Objetos del Documento) es un conjunto de utilidades para manejar documentos XML, HTML y SVG.
Gracias al DOM, podemos modificar a nuestro antojo los documentos, añadiendo etiquetas html desde JavaScript, cambiando o añadiendo atributos y miles de cosas más.
La forma que tenemos para acceder al documento es mediante la palabra document. Palabra que hemos estado utilizando muchas veces con document.write().
document.write("<i>Esto está en cursiva</i>.<br><del>Yo estoy tachado.</del>");Resultado:
Esto está en cursiva.
Yo estoy tachado.
Fíjate como cuando estamos utilizando document, estamos escribiendo en html y funciona. Todo lo del string se interpreta como html, por eso nos han funcionado los saltos de línea de html hasta ahora <br>. Recuerda que cuando escribimos en propio código JavaScript, tenemos que utilizar los saltos de línea de JavaScript \n.
console.log("Una línea.<br>Otra línea.");En este caso, JavaScript no interpreta las etiquetas html, ya que la consola, no pertenece al documento.
Una línea.<br>Otra línea.Sin embargo, si utilizamos el salto de línea de JavaScript, solucionado:
console.log("Una línea.\nOtra línea.");Una línea.
Otra línea.
En resumen a todo esto, el DOM representa el contenido de una página como objetos modificables. Para que te hagas una idea, vamos a cambiar el color del fondo de la etiqueta <body> y a obtener un elemento html como un párrafo mediante su id para cambiarle el estilo de color.
Esto es solo un pequeño ejemplo para que te vayas maravillando con lo que vendrá en los próximos capítulos, no te preocupes si no lo entiendes todo.
Por cierto, si tienes html algo oxidado, es recomendable que lo repases, ya que vamos a empezar a utilizarlo bastante a partir de aquí. Por si te interesa, tienes mi curso básico de html y el curso avanzado de html. Disculpad el audio en estos cursos, eran de los primeros que grababa y no tenía muy buen micrófono.
Primero de todo, deberás cargar la hoja de JavaScript o el <script> </script> después de los elementos que quieras manejar. Es decir, primero se deben cargar los elementos html y después el código JavaScript, si no, te dará un error como este:
Uncaught TypeError: Cannot read properties of null (reading 'style')
Pues si lo tienes por el <head>, ponlo después del cierre del <body>.
Documento test.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Curso de JavaScript</title>
</head>
<body>
</body>
<script src="test.js"></script>
</html>
Ya puedes escribir el código JavaScript que desees. En el siguiente código, en la primera línea, hago referencia al documento, del documento, le digo que seleccione la etiqueta <body> y de esta, que seleccione el atributo html style (puesto que no está en el documento, lo crea) y de este atributo, que utilice la propiedad CSS (background) con un valor de "black".
En la siguiente línea, guardo en una variable (parrafo), el valor del elemento html que tenga ese id 'parrafo'. ¿Para qué? Para poder manejar el párrafo html que tenga ese id.
En la siguiente línea, llamo a la variable y le asigno como he hecho con el <body>, un color, el cual, no se va a aplicar a todos los párrafos, solo al que tenga ese id.
document.body.style.background = "black";
let parrafo = document.getElementById('parrafo');
parrafo.style.color = "white";Palabra del lenguaje nº 68 encontrada.
getElementById() es un método que permite, seleccionar un elemento del documento mediante el atributo id que se le haya asignado.
El archivo html finalmente, lo tengo así:
Documento test.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Curso de JavaScript</title>
</head>
<body>
<p id="parrafo">Este párrafo sería de color negro, pero me han modificado desde el DOM.</p>
</body>
<script src="test.js"></script>
</html>
¿Qué es window de JavaScript?
Por encima de todo tenemos la representación de la ventana del navegador. Esta conforma la raíz entre el DOM, el BOM (ahora lo explicaré) y el lenguaje JavaScript.
window es un objeto global de JavaScript que representa la ventana del navegador. Este objeto nos proporciona métodos para manejarla.
Palabra del lenguaje nº 69 encontrada.
window() es un objeto que representa la ventana que contiene un documento DOM
Mandemos un mensaje a la ventana del navegador. Hasta ahora utilizábamos alert(), gracias a esto, podíamos decirle a la ventana del navegador que desplegase un mensaje en ella. En realidad, estábamos utilizando un método de window:
window.alert("Hola");
¿Qué es BOM de JavaScript?
BOM es el modelo de objetos del navegador (Browser Object Model). Lo que hacemos con el BOM es trabajar con la ventana (window) y con el propio navegador (navigator).
Tenemos diversos tipos en el BOM como window, navigator, location, etc.
Vamos a probar de manejar el navegador con algo simple. Otra pequeña prueba para que vayas tomando mayor interés en continuar el curso.
En la siguiente página html tengo un botón con un evento, onclick, el cual, cuando se presiona hace la llamada a la función que tienes en el código JavaScript.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Curso de JavaScript</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<script src="test.js"></script>
</head>
<body style="margin:1em">
<button class="btn btn-warning" onclick="abreVentana()">Crear ventana nueva</button>
</body>
</html>let ventana;
let ancho;
let alto;
function abreVentana() {
ancho = window.prompt("¿Qué tamaño de ancho ventana desea?");
alto = window.prompt("¿Y de alto?");
ventana = window.open("https://www.programacionfacil.org", "", `width=${ancho}, height=${alto}`);
}
Pulsamos el botón y se nos pregunta por el tamaño de la ventana:
Seguramente tu navegador te bloquee la ventana emergente (pop-up) por temas de rendimiento y seguridad de tu dispositivo. Puedes permitir esta ventana así:
Palabra del lenguaje nº 70 encontrada.
open() es un método de window capaz de abrir un ventana nueva en el navegador.
No te preocupes por entender aún todo, esto es una introducción a este nuevo mundo.
Con window.open abrimos una nueva ventana en el navegador.
Fíjate en los backticks (acento abierto) `width=${ancho}, height=${alto}`. Gracias a su uso, podemos pasar valores literales como ves ahí. Esto solo funciona con backticks.
Por cierto, ya te hablé de los backticks en él .
Comentarios
Si te quedan dudas sobre el temario, sobre JavaScript o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.
