Ver el código de «Objetos de más alto nivel en JavaScript»

El código JavaScript ejecutado en un navegador tiene acceso a un número alto de objetos. Estos objetos pueden estar divididos en varios tipos:
* '''Objetos del núcleo ECMAScript:''' Todos los objetos mencionados hasta este momento.
* '''DOM (''Document Object Model''):''' Objetos que nos permiten hacer algo con la página cargada en estos momentos, objeto que se denomina document y todos los que cuelgan de él.
* '''BOM (''Browser Object Model''):''' Objetos externos al documento web en sí, como la ventana del navegador y la pantalla del equipo.
[[Archivo:DOMBOMJS01.png|miniaturadeimagen|centro|Objetos alto nivel JavaScript]]

El '''DOM''' es un estándar definido por el [https://dom.spec.whatwg.org/ W3C] y tiene diferentes versiones, llamadas niveles, como son DOM Level1, DOM Level 2, etc. Los navegadores actuales implementan en cierto grado el estándar DOM pero, en general, todos implementan completamente el DOM Level 1, el denominado DOM Level 0 (aunque no existe ese estándar en sí).

El Modelo de Objetos del Documento (DOM), permite ver el mismo documento de otra manera, describiendo el contenido del documento como un conjunto de objetos, sobre los que un programa de Javascript puede interactuar.

Según el W3C, "el DOM es una interfaz de programación de aplicaciones (API), para documentos válidos HTML y bien construidos XML". Define así la estructura lógica de los documentos, y el modo en el que se acceden y se manipulan. 

Pero, antes de adentrarnos en el DOM, nos centraremos en los objetos que forman el '''BOM'''. Históricamente, el BOM no es parte de ningún estándar. [https://www.w3c.es/estandares/ El estándar HTML5] implementa el comportamiento común de los navegadores e incluye objetos BOM comunes. Además, los dispositivos móviles vienen con sus objetos específicos (y HTML5 tiene como objetivo estandarizar esos objetos también), que tradicionalmente no eran necesarios para los equipos de escritorio, pero tienen sentido en un mundo móvil, como geolocalización, acceso a la cámara, vibración, eventos táctiles, telefonía y SMS.

Referencias interesantes para aprender más sobre BOM y DOM de lo que veremos aquí:
* [https://developer.mozilla.org/es/docs/DOM Mozilla DOM].
* [https://developer.mozilla.org/es/docs/HTML/HTML5 Wiki de Mozilla HTML5].
* [https://docs.microsoft.com/en-us/openspecs/ie_standards/ms-iestandlp/8aea05e3-8c1e-4a9a-9614-31f71e679457 Documentación de Microsoft para Internet Explorer].
* [https://www.w3.org/DOM/DOMTR https://www.w3.org/DOM/DOMTR].

== El BOM  ==
El '''BOM''' es una colección de objetos que dan acceso al navegador y a la pantalla del ordenador. Estos objetos veremos que son accesibles desde el objeto global '''window'''.

Así, ahora, nos centraremos en objetos de alto nivel, que se encontrarán frecuentemente en las aplicaciones de JavaScript: '''window''', '''location''', '''navigator''', '''screen''' y '''history'''. El objetivo, no es solamente indicar las nociones básicas para que se puedan comenzar a realizar tareas sencillas, sino también, el prepararse para profundizar en las propiedades y métodos, gestores de eventos, etc. que se utilizarán posteriormente.

=== Objeto window ===
En la jerarquía de objetos tenemos, en la parte superior, el objeto '''[https://developer.mozilla.org/es/docs/Web/API/Window window]'''. 

Este objeto está situado justamente ahí, porque es el contenedor principal de todo el contenido que se visualiza en el navegador. Tan pronto como se abre una ventana ('''window''') en el navegador, incluso aunque no se cargue ningún documento en ella, este objeto '''window''' ya estará definido en memoria.

Además de la sección de contenido del objeto '''window''', que es justamente dónde se cargarán los documentos, el campo de influencia de este objeto, abarca también las dimensiones de la ventana, así como todo lo que rodea al área de contenido: las barras de desplazamiento, barra de herramientas, barra de estado, etc.

Como se ve en el gráfico anterior de la jerarquía de objetos, debajo del objeto '''window''' tenemos otros objetos como el '''navigator''', '''screen''', '''history''', '''location''' y el objeto '''document'''. Este objeto '''document''' será el que contendrá todos los objetos existentes dentro de nuestra página HTML.

==== Acceso a propiedades y métodos ====
Para acceder a las propiedades y métodos del objeto '''window''', lo podremos hacer de diferentes formas, dependiendo más de nuestro estilo, que de requerimientos sintácticos. 

Así, la forma más lógica y común de realizar esa referencia, incluiría el objeto '''window''' tal y como se muestra en este ejemplo:
<source lang="javascript">
window.nombrePropiedad
window.nombreMétodo( [parámetros] ) 
</source>

Como se puede ver, como siempre, los parámetros van entre corchetes, indicando que son opcionales y que dependerán del método al que estemos llamando.

Un objeto '''window''' también se podrá referenciar mediante la palabra especial '''[https://developer.mozilla.org/es/docs/Web/API/Window/self self]''', cuando estamos haciendo la referencia desde el propio documento contenido en esa ventana:
<source lang="javascript">
self.nombrePropiedad
self.nombreMétodo( [parámetros] )
</source>

Podremos usar cualquiera de las dos referencias anteriores, pero intentaremos dejar la palabra reservada '''self''', para ''scripts'' más complejos en los que tengamos múltiples ventanas.

Debido a que el objeto '''window''' siempre estará presente cuando ejecutemos nuestros ''scripts'', podremos omitirlo,  en referencias a los objetos dentro de esa ventana. Así que, si escribimos:
<source lang="javascript">
nombrePropiedad
nombreMétodo( [parámetros] )
</source>

También funcionaría sin ningún problema, porque se asume que esas propiedades o métodos, son del objeto de mayor jerarquía (el objeto '''window''') en el cuál nos encontramos.

==== Gestión de ventanas. Métodos window.open() / close() ====
Un ''script'' no creará nunca la ventana principal de un navegador. Es el usuario, quien realiza esa tarea abriendo una URL en el navegador o un archivo desde el menú de abrir. Pero, sin embargo, un ''script'' que esté ejecutándose en una de las ventanas principales del navegador, sí que podrá crear o abrir nuevas sub-ventanas.

El método que genera una nueva ventana es '''window.open()'''. Este método contiene hasta tres parámetros, que definen las características de la nueva ventana: la URL del documento a abrir, el nombre de esa ventana y su apariencia física (tamaño, color,etc.).

Por ejemplo, podemos ver la siguiente instrucción que abre una nueva ventana de un tamaño determinado y con el contenido de un documento HTML:
<source lang="javascript">
var subVentana = window.open("nueva.html", "nueva", "height=800, width=600");
</source>

Lo importante de esa instrucción, es la asignación que hemos hecho en la variable '''subVentana'''. De esta forma podremos, a lo largo de nuestro código, referenciar a la nueva ventana desde el ''script'' original de la ventana principal. Por ejemplo, si quisiéramos cerrar la nueva ventana desde nuestro ''script'',  simplemente tendríamos que hacer:
<source lang="javascript">
subVentana.close();
</source>

Aquí sí que es necesario especificar '''subVentana''', ya que si escribiéramos '''window.close()''', '''self.close()''' o '''close()''' estaríamos intentando cerrar nuestra propia ventana (previa confirmación), pero no la '''subVentana''' que creamos en los pasos anteriores.

==== Métodos window.moveTo() y window.resizeTo() ====
Se trata de dos métodos que nos permiten mover y cambiar el tamaño de las ventanas:
<source lang="javascript">
//Mueve la ventana a la posición de la pantalla x= 100 e y = 100, con origen en la esquina superior-izquierda.
window.moveTo(100, 100)
//Mueve la ventana 10 pixels a la derecha y 10 pixels para arriba.
window.moveBy(10, -10)
//También, con dos parámetros que cambian el tamaño de la ventana.
window.resizeTo(x, y) y window.resizeBy(x, y)
</source>

==== '''Ejemplo''' donde se abre y se cierra una página desde otra principal ====
: - Código HTML:
: <source lang="html">
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>JavaScript</title>

</head>
<h1>Abrimos y cerramos ventanas</h1>
<form>
<p>
<input type="button" id="crear-ventana" value="Crear Nueva Ventana">
<input type="button" id="cerrar-ventana" value="Cerrar Nueva Ventana">
</p>
</form>


<script src="prueba1.js"></script>
</body>
</html>
</source>

: - Código JavaScript:
:<source lang="javascript">
//Variable ventana definida para que sea accesible desde las dos funciones.
var nuevaVentana;
//Función que crea una Nueva Ventana
function crearNueva() {
	nuevaVentana = window.open(
		"https://www.iessanclemente.net",
		"",
		"height=400,width=800"
	);
}
//Función que cierra una ventana si esta existe
function cerrarNueva() {
	if (nuevaVentana) {
		nuevaVentana.close();
		nuevaVentana = null;
	}
}

//Escuchadores para los botones de crear y cerrar nueva ventana:
document.getElementById("crear-ventana").addEventListener("click", crearNueva);
document.getElementById("cerrar-ventana").addEventListener("click", cerrarNueva);
</source>

==== Propiedades y métodos de los objetos window ====
* '''Propiedades del objeto ''window'''''
: {| border="1" cellspacing="0" cellpadding="2" 

! style="background:#ffdead;" | Propiedad
! style="background:#ffdead;" | Descripción
|-
| closed
| Devuelve un valor Boolean indicando cuando una ventana ha sido cerrada o no.
|-
| defaultStatus
| Ajusta o devuelve el valor por defecto de la barra de estado de una ventana.
|-
| document
| Devuelve el objeto document para la ventana.
|-
| history
| Devuelve el objeto history de la ventana.
|-
| location
| Devuelve la Localización del objeto ventana (URL del fichero).
|-
| name
| Ajusta o devuelve el nombre de una ventana.
|-
| navigator
| Devuelve el objeto navigator de una ventana.
|-
| opener
| Devuelve la referencia a la ventana que abrió la ventana actual.
|-
| parent
| Devuelve la ventana padre de la ventana actual.
|-
| self
| Devuelve la ventana actual.
|-
| status
| Ajusta el texto de la barra de estado de una ventana.
|}

* '''Métodos del objeto ''window'''''
: {| border="1" cellspacing="0" cellpadding="2" 

! style="background:#ffdead;" | Propiedad
! style="background:#ffdead;" | Descripción
|-
| Método
| Descripción
|-
| alert()
| Muestra una ventana emergente de alerta y un botón de aceptar.
|-
| blur()
| Elimina el foco de la ventana actual.
|-
| clearInterval()
| Resetea el cronómetro ajustado con setInterval().
|-
| setInterval()
| Llama a una función o evalúa una expresión en un intervalo especificado (en milisegundos).
|-
| close()
| Cierra la ventana actual.
|-
| confirm()
| Muestra una ventana emergente con un mensaje, un botón de aceptar y un botón de cancelar.
|-
| focus()
| Coloca el foco en la ventana actual.
|-
| open()
| Abre una nueva ventana de navegación.
|-
| prompt()
| Muestra una ventana de diálogo para introducir datos.
|}

==== Utilizando la propiedad window.navigator ====
'''[https://developer.mozilla.org/es/docs/Web/API/Window/navigator navigator]''' es un objeto que tiene información del navegador y sus capacidades. 

Podemos crear una función que nos aporte información del navegador del siguiente modo: 
<source lang="javascript">
function leerIdentidadNavegador() {
	return navigator.appName + " " + navigator.appVersion;
} //Fin leerIdentidadNavegador

console.log(leerIdentidadNavegador());
</source>
: Que nos devolverá:
:: '''Netscape 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36'''

Siendo el Navegador un Google Chrome en este caso:
[[Archivo:Navigator01.png|miniaturadeimagen|centro|navigator]]

Pero, cuidado, pues muchos navegadores permiten al usuario modificar esa propiedad y, por lo tanto, no nos podremos fiar de ella para verificar el navegador que estamos utilizando.

Para ver todas las propiedades y métodos del objeto navigator podemos, simplemente, abrir la consola del navegador, escribir navigator y pulsar ''Enter''.
[[Archivo:Navigator02.png|miniaturadeimagen|centro|navigator]]

* '''Propiedades del objeto navigator'''
: {| border="1" cellspacing="0" cellpadding="2" 
! style="background:#ffdead;" | Propiedad
! style="background:#ffdead;" | Descripción
|-
|Propiedad
|Descripción
|-
|appCodeName
|Cadena que contiene el nombre en código del navegador.
|-
|appName
|Cadena que contiene el nombre del cliente. 
|-
|appVersion
|Cadena que contiene información sobre la versión del cliente. 
|-
|cookieEnabled
|Determina si las cookies están o no habilitadas en el navegador.
|-
|platform
|Cadena con la plataforma sobre la que se está ejecutando el programa cliente.
|-
|userAgent
|Cadena que contiene la cabecera completa del agente enviada en una petición HTTP. Contiene la información de las propiedades appCodeName y appVersion. 
|}

* '''Métodos del objeto navitagor'''
: {| border="1" cellspacing="0" cellpadding="2" 
! style="background:#ffdead;" | Propiedad
! style="background:#ffdead;" | Descripción
|-
|Método
|Descripción
|-
|javaEnabled()
|Devuelve true si el cliente permite la utilización de Java, en caso contrario, devuelve false. 
|}

==== Utilizando la propiedad window.location ====
La propiedad '''[https://developer.mozilla.org/es/docs/Web/API/Window/location location]''' es un objeto que  contiene información sobre la URL de la página actualmente cargada. Por ejemplo, '''location.href''' es la URL completa y '''location.hostname''' es solamente el dominio. Con un simple bucle, podemos ver todas las propiedades del objeto '''location'''.
[[Archivo:Location.png|miniaturadeimagen|centro|location]]

Podríamos realizar una función recursiva que nos muestre todas las propiedades del objeto location de la web cargada en esos momentos:
<source lang="javascript">
function verLocation() {
	let windowLocation = [];
	for (let i in window.location) {
		if (typeof window.location[i] === "string") {
			windowLocation.push(window.location[i]);
		}
	}
	return windowLocation;
}

//Luego podemos llamarla
console.log(verLocation());
</source>

: '''Propiedades del objeto location'''
: {| border="1" cellspacing="0" cellpadding="2" 
! style="background:#ffdead;" | Propiedad
! style="background:#ffdead;" | Descripción
|-
|Propiedad
|Descripción
|-
|hash
|Cadena que contiene el nombre del enlace, dentro de la URL.
|-
|host
|Cadena que contiene el nombre del servidor y el número del puerto, dentro de la URL.
|-
|hostname
|Cadena que contiene el nombre de dominio del servidor (o la dirección IP), dentro de la URL. 
|-
|href
|Cadena que contiene la URL completa. 
|-
|pathname
|Cadena que contiene el camino al recurso, dentro de la URL.
|-
|port
|Cadena que contiene el número de puerto del servidor, dentro de la URL. 
|-
|protocol
|Cadena que contiene el protocolo utilizado (incluyendo los dos puntos), dentro de la URL. 
|-
|search
|Cadena que contiene la información pasada en una llamada a un script, dentro de la URL. 
|}

:'''Métodos del objeto location:'''
: {| border="1" cellspacing="0" cellpadding="2" 
! style="background:#ffdead;" | Propiedad
! style="background:#ffdead;" | Descripción
|-
|assign()
|Abre una web (window.location.href sería una alternativa a ese método)
|-
|replace()
|Igual que assign() pero no agrega entrada en el historial del navegador
|-
|reload()
|Recargar la página actual (location = location sería una alternativa a este método)
|}

==== Utilizando la propiedad window.history ====
Podemos acceder al historial de una ventana del navegador. El historial es la lista de visitas del usuario. Así y todo, por motivos de seguridad, únicamente podemos desplazarnos por el historial; no podemos obtener las URL de las páginas incluidas en el mismo.

Para desplazarnos por el historial utilizaremos la propiedad '''[https://developer.mozilla.org/es/docs/Web/API/Window/history history]''' del objeto '''window'''. Veamos unos ejemplos:
<source lang="javascript">
> window.history.length;	//5 (por ejemplo)
> window.history[0];  	//No devuelve nada
> history.forward();  	//Una "adelante"
> history.back();  		//Una "atrás"
> history.go(-1);  		//Una atrás
> history.go(0);  		//Recargar página actual
</source>

==== Utilizando la propiedad window.screen ====
Aunque la mayor parte de la información sobre el sistema del usuario se encuentra oculta por motivos de seguridad, se puede conseguir determinados datos sobre el monitor con ayuda del objeto '''[https://developer.mozilla.org/en-US/docs/Web/API/Window/screen screen]'''.
[[Archivo:Windowscreen.png|miniaturadeimagen|centro|window.screen]]

La diferencia entre '''height''' y '''availHeight''' es que '''height''' es el escritorio completo, mientras que '''availHeight''' es el tamaño sustrayendo los menús del sistema operativo como, por ejemplo, la barra de tareas de Windows (lo mismo ocurre con '''width''' y '''availWidth''').

También existe la propiedad '''DPR''', '''devicePixelRatio''', esta propiedad nos indica la ratio entre los ''pixels'' lógicos y los ''pixels'' físicos de un dispositivo. Por ejemplo, en un portátil, ''tablet'' o móvil con pantalla retina, el valor suele ser 2 o mayor. [https://binaria.com/blog/device-pixel-ratio-consejos-para-desarrolladores/ Aquí tienes un enlace interesante] donde explican como utilizar este parámetro cuando queremos que en nuestra web se muestren bien el texto y las imágenes. 

: '''Propiedades del objeto screen'''
: {| border="1" cellspacing="0" cellpadding="2" 
! style="background:#ffdead;" | Propiedad
! style="background:#ffdead;" | Descripción
|-
|Propiedad
|Descripción
|-
|availHeight
|Devuelve la altura de la pantalla (sin incluir la barra de tareas de Windows)
|-
|availWidth
|Devuelve el ancho de la pantalla (sin incluir la barra de tareas de Windows)
|-
|colorDepth
|Devuelve la profundidad de bits de la paleta de colores.
|-
|height
|Devuelve la altura total de la pantalla.
|-
|PixelDepth
|Devuelve la resolución de color (en bits por pixel) de la pantalla.
|-
|width
|Devuelve el ancho total de la pantalla.
|}

==== Utilizando los métodos window.setTimeout() y setInterval() ====
Los métodos [https://developer.mozilla.org/es/docs/Web/API/WindowTimers/setTimeout setTimeout()] y [https://developer.mozilla.org/es/docs/Web/API/WindowTimers/setInterval setInterval()] permiten programar la ejecución de alguna parte del código de JavaScript. 
* '''setTimeout()''' : Se ejecuta una función después de un tiempo pasado en milisegundos. Ejemplo:
: <source lang="javascript">
<script type="text/javascript">
    function susto() { alert('Boooooo!') };
    setTimeout(susto, 3000);
</script>
</source>

: Esta función devuelve un entero que representa el ID de la ejecución de esa función. Este ID es utilizado para cancelar la ejecución, empleando para ello el método '''clearTimeout()'''.  

* '''setInterval()''' : Se ejecuta una función repetidamente con un intervalo de tiempo configurado en milisegundos.
[[Archivo:Setinterval.png|miniaturadeimagen|centro|setinterval]]

==== Cuadros de diálogo de sistema ====
Además de las ventanas de navegador emergentes, existen otras técnicas para mostrar información al usuario que recurren a los métodos '''[https://developer.mozilla.org/es/docs/Web/API/Window/alert alert()]''', '''[https://developer.mozilla.org/es/docs/Web/API/Window/confirm confirm()]''' e '''[https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input input()]''' del objeto '''window'''.

* '''alert()'''
: La sitnaxis de la invocación '''alert()''' ya es conocida pues se ha utilizado en muchos ejemplos. Este método acepta un argumento, el texto que se va a mostrar al usuario.
: Al invocar '''alert()''', el navegador crea un cuadro de mensaje del sistema que muestra el texto proporcionado junto a un botón '''OK (Aceptar)'''.
<source lang="javascript"> 
alert("¡Hola mundo!");
</source>
[[Archivo:Alert.png|miniaturadeimagen|centro|alert()]]

* '''confirm()'''
: El cuadro de diálogo de confirmación es similar al de advertencia ya que muestra un mensaje al usuario. La principal diferencia entre amos es que muestra un botón '''Cancel (Cancelar)''' junto al botón '''OK (Aceptar)''', que permite al usuario indicar si debe realizarse alguna acción.
<source lang="javascript">
confirm("¿Estás seguro?");
</source>

: Para determinar si el usuario ha pulsado el botón '''OK''' o el botón '''Cancel''', el método '''confirm()''' devuelve un valor booleano: '''true -> OK''' y '''false -> Cancel'''.
[[Archivo:Confirm.png|miniaturadeimagen|centro|confirm()]]

* '''prompt()'''
: En este caso, se solicita una entrada del usuario. Junto con los botones '''OK''' y '''Cancel''', el cuadro de diálogo incluye un cuadro de texto en el que el usuario debe introducir determinados datos. El método '''prompt()''' acepta dos argumentes: el texto que mostrar al usuario y el valor predeterminado del cuadro de texto (que puede ser una cadena vacía).
<source lang="javascript">
var nombre = prompt("¿Cuál es tu nombre?", "Manuel");
</source>

: El valor del cuadro de texto se devuelve como valor de función si se pulsa el botón '''OK'''; si se hace ''click'' en el botón '''Cancel''', se devuelve '''null'''.
[[Archivo:Prompt.png|miniaturadeimagen|centro|prompt()]]


Para finalizar, decir que los cuadros de diálogo '''son ventanas del sistema''', lo que significa que su aspecto puede variar en función del sistema operativo empleado (y, en ocasiones del navegador). También significa que carecemos de control sobre aspectos de la ventana, las fuentes, los colores, etc...
También, saber que '''los cuadros de diálogo son modales''', es decir, el usuario no puede hacer nada en el navegador hasta que cierre el cuadro de diálogo con los botones '''OK''' o '''Cancel'''. Así, es un método habitual para controlar el comportamiento del usuario y garantizar que la información importante se entrega de forma segura.

==== La barra de estado ====
La barra de estado es la zona del borde inferior en la que se muestra información al usuario.

Por lo general, la barra de estado indica al usuario cuándo se abre la página y cuándo termina de abirse; sin embargo, puede establecerse su valor con dos propiedades del objeto '''window''':
* '''status''' : Cambia momentáneamente el texto de la barra de estado.
* '''defaultStatus''' : lo cambia mientras el usuario se encuentre en la página.

Por ejemplo, para utilizar un mensaje predeterminado para la barra de estado al abrir por primera vez la página:
<source lang="javascript">
window.defaultStatus = "Estás accediendo a la web del IES San Clemente."
</source>

También puede mostrar información sobre un determinado enlace cuando el usuario desplace el ratón sobre el mismo:
</source lang="javascript">
<a href="www.xunta.es" onmouseover="window.status='Web de la Xunta.'">Xunta</a>
</source>

Resulta especialmente útil al programar con JavaScript, ya que, por defecto, los navegadores muestran el valor del atributo '''href''' en la barra de estado cuando el usuario desplaza el ratón. Así, al establecer '''window.status''' se ocultan los detalles de la implementación del vínculo:
<source lang="javascript">
<a href="javascript:irAotraWeb(1,2,3,4)" onmouseover="window.status='Web de la Xunta.'">Xunta</a>
</source>

Así y todo, no se recomienda sobreutilizar la barra de estado, pues se puede volver una distracción para la navegación.

== El DOM ==
[https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n El DOM] representa un documento XML o HTML como un árbol de nodos. Utilizando métodos y propiedades de DOM, se puede acceder a todos los elementos de una página, modificarlos, eliminarlos y añadir nuevos. No es algo exclusivo de JavaScript, es una API que también se puede manejar desde otros lenguajes, como PHP por ejemplo.

A continuación se ve un gráfico ejemplo del DOM. Sin duda, es importante tener este árbol de objetos en mente porque va a ser la guía a lo largo de toda esta unidad.
[[Archivo:Dom.png|miniaturadeimagen|centro|El DOM]]

Para ver este "árbol" en una web real podemos ejecutar el siguiente código en el navegador que, a medida que avancemos en el tema, iremos entendiendo poco a poco: 
<source lang="html">
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8" />
	<title>Probando el DOM</title>
	<style type="text/css">
		.callout {
			border: solid 1px #ff0080;
			margin: 2px 4px; padding: 2px 6px; }
		.code {
			background: #ccc; margin: 1px 2px;
			padding: 1px 4px; font-family: monospace; }
	</style>
</head>

<body>
  <header>
    <h1>HTML simple</h1>
  </header>
  <div id="content">
    <p>Este es un archivo HTML muy <i>simple</i></p>
    <div class="callout">
      <p>Este texto sí es importante!!</p>
    </div>
    <p>IDs (como <span class="code">#content</span>) son únicos 
    (sólo puede existir uno por página).</p>
    <p>Clases (como <span class="code">.callout</span>) 
    pueden ser utilizadas en muchos elementos.</p>
    <div id="callout2" class="callout fancy">
      <p>Un elemento HTML puede tener múltiples clases.</p>
    </div>
   </div>

<script type="text/javascript">
 function printDOM(node, prefix) {
        console.log(`${prefix} ${node.nodeName}  :  ${node.nodeType}  ->  ${node.nodeValue}`);  
      for(let i=0; i<node.childNodes.length; i++) {
        printDOM(node.childNodes[i], `${prefix} \t`);
      }
    }
    printDOM(document, '');
</script>

</body>
</html>
</source>

Como veremos con más detenimiento más adelante, todos los nodos del árbol tienen las propiedades [https://developer.mozilla.org/es/docs/Web/API/Node/nodeType nodeType] y [https://developer.mozilla.org/es/docs/Web/API/Node/nodeName nodeName]:
* '''nodeType''' es un entero que identifica el tipo de nodo que es ([https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#Node_type_constants en la siguiente web podemos ver los posibles valores]).
* '''nodeName''' es una propiedad de solo lectura que devuelve el nombre del nodo.
* '''nodeValue''' es otra propiedad interesante de los nodos, muchos de ellos vemos que su valor es ''null' pero, para los nodos tipo texto es el texto que se muestra por pantalla.

Si nos centramos sólo en el anidamiento, vemos en el ejemplo anterior, la complejidad que va a tener acceder a cada uno de los elementos de la página, pero el '''DOM''' nos provee de métodos más directos para referirnos a cada uno de ellos.
* Por ejemplo, el objeto '''[https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker TreeWalker]''' es un poderoso objeto '''DOM''' que permite filtrar fácilmente y crear colecciones personalizadas de nodos en el documento. Veamos un ejemplo para entender su funcionamiento:
<source lang="javascript">
var rootnode = document.getElementById("content");
var walker=document.createTreeWalker(rootnode, NodeFilter.SHOW_ELEMENT, null, false);

//El nodo de inicio (root node)
console.log(walker.currentNode.tagName); //Elemento con id=content

//Recorrer todos los subnodos y verlos por consola
while (walker.nextNode()){
	console.log(walker.currentNode.tagName); //Vemos los subnodos
}
console.log("------------------------------------------")
//Volver al primer nodo
walker.currentNode=rootnode; //reset TreeWalker
console.log(walker.firstChild().tagName); //Primer hijo de rootnode

</source>

: '''Nota sobre la Terminología:''' El concepto de árbol ('''tree''') es sencillo e intuitivo, y se presta a una terminología igualmente intuitiva. El padre ('''parent''') de un nodo es su padre directo y un hijo ('''child''') es un hijo directo. El término descendiente ('''descendant''') se usa para referirse a un hijo, o al hijo de un hijo, etc. El término ancestro ('''ancestor''') se utiliza para referirse a un padre, al padre del padre, etc.

=== Objeto document ===
Cada documento cargado en una ventana del navegador, será un objeto de tipo '''[https://developer.mozilla.org/es/docs/Web/API/Document document]'''.

El objeto '''document''' proporciona a los ''scripts'', el acceso a todos los elementos HTML dentro de una página. Este objeto forma parte además del objeto '''[https://developer.mozilla.org/es/docs/Web/API/Window window]''', y puede ser accedido a través de la propiedad '''window.document''' o directamente '''document''' (ya que podemos omitir la referencia a la ventana actual).

==== Colecciones dentro del objeto '''document''' ====
: Se creará una colección (un tipo de array) para cada tipo de elementos:
: {| border="1" cellspacing="0" cellpadding="2" 
! style="background:#ffdead;" | Colección 
! style="background:#ffdead;" | Descripción
|-
|anchors[ ]
|Es un array que contiene todos los hiperenlaces del documento.
|-
|forms[ ]
|Es un array que contiene todos los formularios del documento.
|-
|images[ ]
|Es un array que contiene todas las imágenes del documento.
|-
|links[ ]
|Es un array que contiene todos los enlaces del documento.
|-
|}

==== Propiedades del objeto '''document''' ====
: El objeto '''document''' tiene estas propiedades:
: {| border="1" cellspacing="0" cellpadding="2" 
! style="background:#ffdead;" | Propiedad
! style="background:#ffdead;" | Descripción
|-
|cookie
|Devuelve todos los nombres/valores de las cookies en el documento.
|-
|domain
|Cadena que contiene el nombre de dominio del servidor que cargó el documento.
|-
|referrer
|Cadena que contiene la URL del documento desde el cuál llegamos al documento actual.
|-
|title
|Devuelve o ajusta el título del documento.
|-
|URL
|Devuelve la URL completa del documento.
|}

==== Métodos del objeto '''document''' ====
El objeto '''document''' tiene los siguientes métodos:
: {| border="1" cellspacing="0" cellpadding="2" 
! style="background:#ffdead;" | Método
! style="background:#ffdead;" | Descripción
|-
|close( )
|Cierra el flujo abierto previamente con document.open().
|-
|getElementById( )
|Devuelve el elemento identificado por el id escrito entre paréntesis.
|-
|getElementsByName( )
|Devuelve una lista de elementos identificados por el atributo name escrito entre paréntesis.
|-
|getElementsByTagName( )
|Devuelve una lista de elementos identificados por el tag o la etiqueta escrita entre paréntesis.
|-
|getElementsByClassName( )
|Devuelve una lista de elementos identificados por el class definido.
|-
|getElementsByTagNameNS( )
|Devuelve una lista de elementos cuyo nombre pertenece a un determinado ''[https://developer.mozilla.org/es/docs/Web/API/Element/getElementsByTagNameNS namespace]''.
|-
|open( )
|Abre el flujo de escritura para poder utilizar document.write( ) o document.writeln en el documento.
|-
|write( )
|Para poder escribir expresiones HTML o código de JavaScript dentro de un documento.
|-
|writeln( )
|Lo mismo que write( ) pero añade un salto de línea al final de cada instrucción.
|}

=== Accediendo a los nodos DOM ===
Antes de validar las entradas de un usuario en los formularios o intercambiar imágenes, se necesita tener acceso a los elementos que queremos leer o inspeccionar. 

Como ya se comentó antes, todos los nodos, incluyendo el nodo '''document''', nodos de texto, nodos de elementos y nodos de atributos tienen las propiedades '''nodeType''', '''nodeName''' y '''nodeValue'''.	 
* '''[https://developer.mozilla.org/es/docs/Web/API/Node/nodeType nodeType]''' : Hay 12 tipos de nodos, representados por enteros. Como pudimos ver con el código del punto anterior, el tipo de nodo '''document''' es el 9. Los más comunmente usados son 1 (elemento), 2 (atributo) y 3 (texto).
* '''[https://developer.mozilla.org/es/docs/Web/API/Node/nodeName nodeName]''' : Los nodos también tienen nombres (propiedad '''[https://developer.mozilla.org/es/docs/Web/API/Element/tagName tagName]''', '''#text''' si es un nodo de texto,...).
* '''[https://developer.mozilla.org/es/docs/Web/API/Node/nodeValue nodeValue]''' : Los nodos también tienen "valores". Por ejemplo, para nodos de texto, el valor es el texto actual.

==== DocumentElement ====
Ahora, vamos a movernos por el árbol. Para los documentos HTML, el elemento principal es la etiqueta '''<html>'''. Para acceder al elemento principal, debemos utilizar la propiedad '''[https://developer.mozilla.org/es/docs/Web/API/Document/documentElement documentElement]''' del objeto '''document'''.
[[Archivo:DocumentElement.png|miniaturadeimagen|centro|documentElement]]

==== Nodos hijo ====
Para comprobar que un nodo tiene un hijo empleamos el método '''[https://developer.mozilla.org/es/docs/Web/API/Node/hasChildNodes hasChildNodes()]'''.

El elemento HTML tiene tres hijos: el elemento '''head''', el elemento '''body''' y el espacio en blanco existente entre ellos (muchos navegadores no cuentan este espacio en blanco). A esos tres elementos podemos acceder a ellos utilizando la colección '''[https://developer.mozilla.org/es/docs/Web/API/Node/childNodes childNodes]''', lo haremos del siguiente modo:
[[Archivo:NodosHijo.png|miniaturadeimagen|centro|Nodos Hijo]]

Todo hijo tiene acceso a su padre utilizando la propiedad '''[https://developer.mozilla.org/es/docs/Web/API/Node/parentNode parentNode]''', podemos verlo en el siguiente ejemplo:
<source lang="javascript">
> document.documentElement.childNodes[1].parentNode; //<html>...
</source>

Si utilizamos el código HTML anterior, podemos ver que el número de hijos nodos existentes dentro del elemento '''<body>''' son 7:
[[Archivo:NodosHijo2.png|miniaturadeimagen|centro|Ejemplo Nodos Hijo]]

==== Elementos hermanos ====
Otras propiedades interesantes para navegar por el DOM, una vez seleccionado un elemento, son [https://developer.mozilla.org/es/docs/Web/API/Node/nextSibling nextSibling] y [https://developer.mozilla.org/es/docs/Web/API/Node/previousSibling previousSibling]. Veamos el siguiente código:

<source lang="javascript">
<script type="text/javascript">

//Accedemos al div con id="callout2"
const dCallout2 = document.getElementById('callout2');

//nextSibling : recorremos el árbol hacia delante
  console.log("--Hacia abajo de 'callout2'--");
  //Primer siguiente hermano
    console.log(dCallout2.nextSibling); // #text
  //Segundo siguiente hermano
	console.log(dCallout2.nextSibling.nextSibling); // null

//previousSibling : recorremos el árbol hacia atrás
  console.log("--Hacia arriba de 'callout2'--");
  //Primer anterior hermano
    console.log(dCallout2.previousSibling); // #text
  //Segundo anterior hermano
    console.log(dCallout2.previousSibling.previousSibling) // <p>
  //Tercer... 
    console.log(dCallout2.previousSibling.previousSibling.previousSibling) //#text 
 
</script>
</source>

Las propiedades '''[https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild firstChild]''' y '''[https://developer.mozilla.org/es/docs/Web/API/Node/lastChild lastChild]''' también son interesantes. La propiedad '''firstChild''' es la misma que '''childNodes[0]''', y '''lastChild''' es la misma que  '''childNodes[childNodes.length – 1]'''.

<source lang="javascript">
<script type="text/javascript">

//Accedemos al div con id="callout2"
  const divContent = document.getElementById('content');

//Elemento siguiente al Primer hijo, pues el primero está vacío
  console.log(divContent.firstChild.nextSibling.innerHTML);
    //Salida: Este es un archivo HTML muy <i>simple</i>

//Elemento anterior al Último hijo, pues el último está vacío
  console.log(divContent.lastChild.previousSibling.innerHTML);
    //Salida: <p>Un elemento HTML puede tener múltiples clases.</p>

</script>
</source>

==== Modos más precisos de acceder a los elementos de un documento ====
Utilizando las propiedades y los métodos '''childNodes''',  '''firstChild''', '''lastChild''', '''nextSibling''' y '''previousSibling''', se puede navegar hacia arriba y hacia abajo por el árbol HTML y, así, hacer todo lo que nos interese en el documento. Sin embargo, el hecho de que los espacios son nodos de texto hace muy frágil este modo de trabajar con el DOM. Si la página cambia, nuestro ''script'' seguramente no trabaje correctamente. También, si nos interesa acceder al nodo más profundo del árbol, hará que el código sea un poco largo y tedioso. Por estos motivos, existen métodos más directos como pueden ser:

* '''[https://developer.mozilla.org/es/docs/Web/API/Document/getElementsByTagName getElementsByTagName()]''' : Este método crea una colección con todos los elementos de la página que pertenecen a ese tipo ('''p''', '''a''', '''table''', '''div''',...). 

* '''[https://developer.mozilla.org/es/docs/Web/API/Document/getElementsByClassName getElementByClassName()]''' : Devuelve una lista de elementos que pertenecen a una clase determinada.

Veamos un ejemplo con nuestra página de trabajo:
<source lang="javascript">
<script type="text/javascript">
//Colección de los div del documento
  var cD = document.getElementsByTagName('div');

//Número de elementos div existentes
  console.log(cD.length);

//Recorremos toda la colección de elementos div
for(let i=0; i<cD.length; i++) {
    console.log(cD[i]);
}
console.log("-----------")

//Accedemos al contenido HTML del segundo div
console.log(cD[1].innerHTML);

//Accedemos al atributo class del segundo div
console.log(cD[1].className);
console.log("-----------")

//Si nos interesa seleccionar todos los elementos HTML de la página
let tElementos = document.getElementsByTagName('*');

//Número de elementos HTML en total
console.log(tElementos.length);
</script>
</source>

* '''[https://developer.mozilla.org/es/docs/Web/API/Document/getElementsByName getElementsByName()]''' : Este método crea una colección con todos los elementos de la página que tienen la propiedad '''name''' configurada como nos interese buscar.

* '''[https://developer.mozilla.org/es/docs/Web/API/Document/getElementById getElementById()]''' : Sin duda, es el modo más común de acceder '''a un elemento.''' Justamente se asignan IDs a los elementos para que sea sencillo acceder a ellos (debería ser un ID distinto por elemento). Veamos un ejemplo con nuestra página de trabajo: 
<source lang="javascript">
<script type="text/javascript">
//Accedemos al div con id="content"
const dContent = document.getElementById('content');
	
//A partir de aquí, 
//hacemos lo que nos interese con ese objeto seleccionado
//Por ejemplo, mostrar todos los nodos HTML existentes en su interior
for(let i=0; i<dContent.childNodes.length; i++) {
    console.log(dContent.childNodes[i]);
}
</script>
</source>

Decir que, recientemente, aparecieron nuevos métodos de acceso directo, como pueden ser:
* '''[https://developer.mozilla.org/es/docs/Web/API/Document/querySelector querySelector()]''' : Este método encuentra elementos utilizando un selector CSS, pero sólo devuelve la primera coincidencia.
* '''[https://developer.mozilla.org/es/docs/Web/API/Document/querySelectorAll querySelectorAll()]''' : Hace lo mismo que el método anterior, pero devuelve una colección con todas las coincidencias.

==== Caminar por el DOM ====
La siguiente función nos permite "caminar por el DOM" desde un nodo dado:
<source lang="javascript">
<script type="text/javascript">
//Función caminarDOM(n)
function caminarDOM(n) {
	do {
		console.log(n);
		if (n.hasChildNodes()) {
			caminarDOM(n.firstChild);
		}
	} while ((n = n.nextSibling));
}

//Comenzamos a caminar en el <body>
caminarDOM(document.body);
</script>
</source>

==== Atributos ====
Como el primer hijo del elemento '''<body>''' es un espacio en blanco, el segundo hijo (elemento '''[1]''' de la colección) es el primer elemento real, luego hay otro espacio en blanco y, ya el elemento '''[3]''' de la colección es '''&#60;div id="content"&#62;''':
<source lang="javascript">
> bd.childNodes[3]; 	//<div id="content">...
</source>

Podemos chequear si un elemento tiene algún atributo, y si es así, podemos ver cuántos tiene:
<source lang="javascript">
> bd.childNodes[3].hasAttributes(); 		//true
> bd.childNodes[3].attributes.length; 		//1
> bd.childNodes[3].attributes[0]; 		//id="content"
> bd.childNodes[3].attributes['id']; 		//id="content"
> bd.childNodes[3].getAttribute('id'); 	//"content"
</source>

Vemos que utilizamos:
* '''[https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttributes hasAttributes()]''' : Método de los elementos HTML que devuelve un booleano indicando si tiene o no algún atributo. No requiere parámetros.
* '''[https://developer.mozilla.org/es/docs/Web/API/Element/hasAttribute hasAttribute()]''' : Método de los elementos HTML que devuelve un booleano indicando si tiene un tipo de atributo en concreto pasado como parámetro.
* '''[https://developer.mozilla.org/es/docs/Web/API/Element/attributes attributes]''' : Propiedad que devuelve una lista de los atributos que tiene un elemento HTML.
* '''[https://developer.mozilla.org/es/docs/Web/API/Element/getAttribute getAttribute()]''' : Método de los elementos HTML que devuelve el valor configurado de un atributo determinado pasado como parámetro.

==== Accediendo al contenido del interior de un elemento ====
Para acceder al contenido de los elementos de una página HTML podemos utilizar las propiedades:
* '''[https://developer.mozilla.org/es/docs/Web/API/Node/textContent textContent]''' : Devuelve el texto existente en un nodo. Y también puede configurarlo.
* '''[https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML innerHTML]''' : Devuelve o establece el valor ''HTML'' de un nodo.
* '''[https://developer.mozilla.org/es/docs/Web/API/Node/nodeValue nodeValue]''' : Devuelve o establece el "valor" del nodo en cuestión. Para el elemento ''document'' el valor es ''null'' y para los nodos de tipo texto devuelve el texto en sí.

Si seguimos con nuestro documento de trabajo, podemos utilizar el siguiente código de JavaScript para entender el funcionamiento de estas propiedades y métodos. En él leemos el texto existente en el párrafo:
<source lang="html">
<p>Este es un archivo HTML muy <i>simple</i></p>
</source>

<source lang="javascript">

<script type="text/javascript">

  //Seleccionamos el <body> del documento
    var bd = document.documentElement.childNodes[2]; //bd  = <body>
    console.log(bd);
  //Seleccionamos el <div> donde se encuentra el párrafo que nos interesa
    var dc = bd.childNodes[3]; //dc = <div id="content">
    console.log(dc);
  //Vemos todos los elementos dentro del <div>
    console.log(dc.childNodes.length); //11 elementos dentro del div
    for(i=0;i<dc.childNodes.length;i++) {
      console.log(dc.childNodes[i]);
    } //El <p> que nos interesa es el [1]
  //Seleccionamos ese <p>
    var p = dc.childNodes[1]; //p = <p>...
    console.log(p.nodeName); //"P"

//Utilizamos la propiedad textContent
  console.log(p.textContent); //"Este es un archivo HTML muy simple"
//Utilizamos la propiedad innerHTML
  console.log(p.innerHTML); //"Este es un archivo HTML muy <i>simple</i>"
//Utilizamos el método nodeValue de los nodos de p
  console.log(p.childNodes[0].nodeValue); //Este es un archivo HTML muy

</script>

</source>

=== Modificando los nodos DOM ===
Ahora ya nos podemos centrar en modificar el contenido de los nodos DOM, para ello, primeramente tendremos que seleccionar el nodo que nos interesa empleando cualquiera de los métodos vistos hasta ahora. Luego, utilizaremos las propiedades '''innerHTML''' o '''nodeValue''' para modificar su contenido. Podemos ver un nuevo ejemplo, que nos quedará de base para futuros puntos. 

<source lang="html">

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8" />
		<title>JavaScript</title>
	</head>
	<body>
		<fieldset>
			<legend>Jugar con el DOM</legend>
			<label for="texto">Texto:</label>
			<input type="text" id="texto" name="texto" />
			<br /><br />
			<input type="button" id="modificar" value="Modificar" />
			<br /><br />
			<label id="txtSal">Texto base</label>
		</fieldset>

		<script>
			function modificar() {
				//Seleccionamos el texto que escribimos en la caja con id='texto'
				var t = document.getElementById("texto").value;
				//Modificamos el contenido de la <label> con id='txtSal'
				var etiqueta = document.getElementById("txtSal");
				etiqueta.innerHTML = t;
			}

			//Agregamos el escuchador
			document
				.getElementById("modificar")
				.addEventListener("click", modificar);
		</script>
	</body>
</html>

</source>

==== Modificando atributos ====
Para modificar [https://developer.mozilla.org/es/docs/Web/HTML/Atributos atributos] de un elemento determinado tenemos el método '''[https://developer.mozilla.org/es/docs/Web/API/Element/setAttribute setAttribute()]''' que establece el valor de un atributo en el elemento indicado. Si el atributo ya existe, el valor es actualizado, en caso contrario, el nuevo atributo es añadido con el nombre y valor indicado.

Para obtener el valor actual de un atributo, se utiliza '''[https://developer.mozilla.org/es/docs/Web/API/Element/getAttribute getAttribute()]''' y para eliminar un atributo, se llama a '''[https://developer.mozilla.org/es/docs/Web/API/Element/removeAttribute removeAttribute()]'''.

Podemos ver el siguiente ejemplo donde se añade el atributo ''class'' con el valor de '''clase1''' al primer elemento '''h1''' del documento:
<source lang="html">
  document.getElementsByTagName("H1")[0].setAttribute("class", "clase1");
</source>

Se podría modificar cualquier atributo de un elemento en cuestión, como vemos, incluso los referentes a los estilos. Así y todo, en el siguiente punto veremos como modificar los estilos con métodos específicos para ello.

==== Modificando estilos ====
Además del contenido, es interesante también modificar los estilos de los elementos. Veamos algunas técnicas y, a continuación, los aplicaremos en el  siguiente ejemplo utilizando de base el código anterior:
* Los elementos tienen una propiedad asociada a los estilos.
* Las propiedades CSS a menudo tienen guiones, pero los guiones no son aceptables en los identificadores de JavaScript. En tales casos, omite el guión y escribe en mayúscula la siguiente letra. Entonces, '''padding-top''' se convierte en '''paddingTop''', '''margin-left''' se convierte en '''marginLeft''', y así sucesivamente.
* También podemos leer el estilo aplicado en el nodo seleccionado.

Así, el código ejemplo queda del siguiente modo:
<source lang="javascript">
function modificar() {
	//Seleccionamos el texto que escribimos en la caja con id='texto'
	var t = document.getElementById("texto").value;

	//Modificamos el contenido de la <label> con id='txtSal'
	var etiqueta = document.getElementById("txtSal");
	etiqueta.innerHTML = t;

//Modificamos los estilos
	//Dibujar un borde a la etiqueta
	etiqueta.style.border = "1px solid red";
	//Poner en negrita el texto
	etiqueta.style.fontWeight = "bold";

	//También podemos leer el estilo actualmente aplicado
	console.log(etiqueta.style.cssText);
}
</source>

También podemos modificar el código para añadir o modificar el atributo '''class''' del elemento seleccionado. Para acceder a las clases configuradas en un elemento y poder modificarlas tenemos las siguientes herramientas:
* La propiedad de solo lectura '''[https://developer.mozilla.org/es/docs/Web/API/Element/classList classList]''' : Que es una propiedad que devuelve una lista con las clases definidas en el nodo seleccionado. Lógicamente, si el atributo clase no está definido o está vacío, '''classList.length''' devuelve 0. 
* Como '''classList''' es de sólo lectura, esta propiedad tiene los siguientes métodos para modificar las clases configuradas en un elemento:
:* '''add(String [, String])''' : Añade las clases indicadas. Si estas clases existieran en el atributo del elemento serán ignoradas.
:* '''remove(String [, String])''' : Elimina las clases indicadas.
:* '''toggle(String [, condition])''' : Alternar el valor de la clase indicada.
:* '''contains()''' : Comprueba si la clase indicada existe en el atributo de clase del elemento.
:* '''replace( oldClass, newClass )''' : Reemplazar el valor de la clase indicada por la otra.
* También existe la propiedad '''[https://developer.mozilla.org/es/docs/Web/API/Element/className className]''' : Obtiene y establece el valor del atributo '''class''' del elemento especificado.
Así quedaría el ejemplo visto antes:
<source lang="html">
<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="UTF-8" />
		<style type="text/css">
			.labelSal {
				border-style: dashed solid;
				border-color: red;
				font-weight: bold;
			}
		</style>
		<title>JavaScript</title>
	</head>
	<body>
		<fieldset>
			<legend>Jugar con el DOM</legend>
			<label for="texto">Texto:</label>
			<input type="text" id="texto" name="texto" />
			<br /><br />
			<input
				type="button"
				id="divModificar"
				name="Modificar"
				value="Modificar"
			/>
			<br /><br />
			<label id="txtSal">Texto base</label>
		</fieldset>

		<script>
			function modificar() {
				//Seleccionamos el texto que escribimos en la caja con id='texto'
				  const t = document.getElementById("texto").value;
				//Modificamos el contenido de la <label> con id='txtSal'
				  let etiqueta = document.getElementById("txtSal");
				  etiqueta.innerHTML = t;
				//Modificamos los estilos agregando una clase a la <label>
				  etiqueta.classList.add("labelSal");
			}

			//Agregamos el escuchador
			document
				.getElementById("divModificar")
				.addEventListener("click", modificar);
		</script>
	</body>
</html>

</source>

=== Creando nuevos nodos ===
Para crear nuevos nodos, podemos emplear los métodos:
* '''[https://developer.mozilla.org/es/docs/Web/API/Document/createElement createElement(tagName)]''' :  Crea un elemento HTML especificado por su '''tagName'''.
* '''[https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode createTextNode(data)]''' : Crea un nuevo nodo de texto con contenido ''data''.
* '''[https://developer.mozilla.org/es/docs/Web/API/Document/createDocumentFragment createDocumentFragment()''' : Se crea un objeto ''DocumentFragment'' vacío, el cual queda listo para que pueda insertársele nodos en el.
Una vez creados, podemos añadirlos al árbol DOM empleando uno de los métodos siguientes: 
* '''[https://developer.mozilla.org/es/docs/Web/API/Node/appendChild appendChild()]''' : Inserta un nuevo nodo dentro del siguiente modo '''nombreNodoPadre.appendChild(nombreNodoHijo)'''.
* '''[https://developer.mozilla.org/es/docs/Web/API/Node/insertarAntes insertBefore()]''' : Inserta un nodo antes del nodo de referencia como hijo de un nodo padre indicado. Tendría la siguiente sintaxis: '''nombreNodoPadre.insertBefore(nombreNuevoNodo, nodoReferenciaDelanteDelQueInsertamos)''';  
* '''[https://developer.mozilla.org/es/docs/Web/API/ChildNode/after after()]''' :  Inserta uno o varios nodos después del nodo de referencia como hijo de un nodo padre indicado.
* '''[https://developer.mozilla.org/es/docs/Web/API/Node/replaceChild replaceChild()]''' : Reemplaza un nodo hijo por otro del elemento padre especificado.

Escribamos el siguiente código para probar estos métodos:
<source lang="html">
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>My página</title>
</head>
<body>
	<p class="primero">Primer párrafo</p>
	<p><em>Segundo</em> párrafo</p>
	<p id="cierre">Final</p>
	<!-- y eso es todo -->
</body>
</html>
</source>

En la consola podemos probar las siguientes líneas de código:
<source lang="javascript">
//1. Crear un nuevo elemento p y modificar su propiedad innerHTML:
    > var miP = document.createElement('p');
    > miP.innerText = 'Otro párrafo más';
    //¡Ojo! NO va a aparecer en el Navegador hasta que lo añadamos a 'document'

//2. El nuevo elemento, automáticamente, tiene ya configuradas todas sus propiedades, en concreto style. Además de verlas podemos modificarlas:
    > miP.style;
        CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
    > miP.style.border = '2px dotted blue';

//3. Empleando el método appendChild() podemos agregar el párrafo al documento:
    > document.body.appendChild(miP);
</source>

[[Archivo:Cnn01.png|miniaturadeimagen|centro|Creando nuevos nodos]]

==== Utilizando sólo métodos DOM ====
La propiedad '''innerHTML''' nos permite hacer las cosas más fácilmente que utilizando sólo métodos DOM. Podemos verlo con el siguiente ejemplo, donde se quiere añadir, al final del elemento '''body''', el siguiente párrafo:
<source lang="html">
  <p>Un párrafo más<strong> resaltado</strong></p>
</source>

Con la propiedad '''innerHTML''' el método sería exactamente igual al del ejemplo anterior (cambiando '''innerHTML''' por '''innerText''').

Utilizando únicamente métodos DOM, el código quedaría así:
<source lang="javascript">
//1. Crear p
  > var miP = document.createElement('p');
  //undefined

//2. Crear el nodo texto y agregárselo a p
  > var miT = document.createTextNode('Un párrafo más ');
  //undefined
  > myp.appendChild(miT);
  //#text "Un párrafo más"

//3. Crear el elemento strong y agregarle un nodo texto a él
  > var strong = document.createElement('strong');
  //undefined
  > strong.appendChild(document.createTextNode(' resaltado'));
  //#text "resaltado"

//4. Agregar strong a p
  > miP.appendChild(strong);
  //<strong>

//5. Agregar p al final del body
  > document.body.appendChild(miP);
  //<p>

</source>

==== Trabajando con el método '''insertBefore()''' ====
Como ya se comentó antes, utilizando '''appendChild()''', tú puedes solo añadir un nuevo hijo al final del elemento seleccionado. Para más control sobre la localización exacta, existe el método '''insertBefore()'''. Este hace lo mismo que '''appendChild()''', pero acepta un parámetro extra especificando dónde (antes de qué elemento) se va a insertar el nuevo nodo.

Por ejemplo, el siguiente código inserta un nodo texto al final del elemento '''body''':
<source lang="javascript">
> document.body.appendChild(document.createTextNode('¡hola!'));
</source>

Sin embargo, este código crea otro nodo texto y lo añade como primer hijo del elemento '''body''':
<source lang="javascript">
> document.body.insertBefore(document.createTextNode('¡Primer saludo!'), document.body.firstChild);
</source>

Siguiendo con el ejemplo anterior, podríamos insertar el nuevo párrafo antes del id='cierre' luego de haberlo insertado al final del body:
<source lang="javascript">
> let idCierre = document.getElementById('cierre');
> document.body.insertBefore(miP, idCierre);
  //<p>
  //Vemos que el párrafo 'miP' cambia de lugar...
</source>

==== Emplear el método cloneNode() ====
Otro modo de crear nodos es “clonando” nodos ya existentes. El método '''[https://developer.mozilla.org/es/docs/Web/API/Node/cloneNode cloneNode()]''' acepta un parámetro ''booleano'':
* '''true''' = copia el nodo y todos sus hijos.
* '''false''' = copia únicamente el nodo.

Así, podemos ver un ejemplo siguiendo con el anterior:
<source lang="javascript">
//Hacemos un clon de 'miP' con todo su interior
  > let miPtrue = miP.cloneNode(true);
  //undefined
  > document.body.appendChild(miPtrue);
  //<p>
//Vemos que aparece al final del 'body' sin desaparecer 'miP' de la web

//Ahora hacemos otro clon de 'miP' pero sin clonar sus hijos 
  > let miPfalse = miP.cloneNode(false);
  //undefined
  > document.body.appendChild(miPfalse);
  //<p>
//Aparentemente no se agrega nada, pero si inspeccionamos el HTML
//vemos que se añade a la web un nuevo <p> sin nada en su interior
</source>

=== Eliminando nodos ===
Para eliminar nodos del árbol DOM, podemos emplear el método '''[https://developer.mozilla.org/es/docs/Web/API/Node/removeChild removeChild()]'''. 

Así y todo, ya se comentó antes que también existe el el método '''replaceChild()''' que elimina un nodo y pone otro en su lugar.

Por otro lado, eliminar elementos utilizando la propiedad '''innerHTML''' es mucho más rápido y fácil en la mayoría de los casos.

Como ejemplo, aquí tenemos una pequeña función que elimina, utilizando métodos DOM, todos los nodos desde uno dado como parámetro:
<source lang="javascript">
function removeAll(n) {
  while (n.firstChild) {
    n.removeChild(n.firstChild); 
  } 
}
</source>

Para borrar todo:
<source lang="javascript">
> removeAll(document.body);
</source>

[[JavaScript|Volver]]