Repaso

Variables

Las variables se pueden cambiar de valor todas las veces que se quiera.

    var nombre = "Pepe"; 
    let apellidos = "Pérez";

    nombre = "María";
    apellidos = "Gómez";

Constantes

Una constante una vez asignado un valor ya no se puede cambiar.

    const PI = 3.1416;
    const nombreCompleto = nombre + " " + apellidos;

    nombreCompleto = "Ana Gutierrez"; // Da ERROR porque es una constante

DOM

Representación en Javascript de la estructura de un documento HTML. Se puede manipular en cualquier sentido: añadir, modificar o borrar elementos. Añadir, modificar o borrar atributos.

Al modificar el DOM, la página web en vivo cambia, pero no el código HTML subyacente. No se pueden guardar los cambios en el HTML original.

- **Element** = Nombre de la etiqueta: P, A, IMG, DIV, SPAN, 
- **Attribute** = Ejemplos: src, href, id, class, value, ...

Objetos predefinidos en el DOM

- **document** = Página web. Raíz del DOM <html>
- **document.body** = Es el BODY
- **window** = Ventana del navegador
- **history** = Historial de navegación: atrás y adelante
- **location** = Dirección de la página web
- **screen** = Pantalla del ordenador: dimensiones
- **navigator** = Características del navegador web

Encontrar las etiquetas

1) Una etiqueta con identificador:

HTML:

<div id="contenedor">

Javascript:

const div = document.getElementById('contenedor');
const div = document.querySelector('#contenedor');

Sino encuentra el identificador, la variable div será null.

2) Encontrar por el nombre de etiqueta:

HTML:

<p></p><p></p><p></p>

Javascript:

const parrafos = document.getElementsByTagName('p');
const parrafos = document.querySelectorAll('p');

Este ejemplo daría un array de 3 párrafos.

3) Encontrar etiquetas por la clase a la que pertenece:

HTML:

<p class="kiwi">...<li class="pera kiwi">...<a class="kiwi uva">

Javascript:

const kiwis = document.getElementsByClassName('kiwi');
const kiwis = document.querySelectorAll('.kiwi');

Este ejemplo daría un array de 3 etiquetas.

4) Encontrar las etiquetas que están dentro de otra etiqueta.

HTML:

<ul id="menu"><li><a>...<li><a>...<li><a>...

Javascript:

const enlaces = document.querySelectorAll('#menu a');

5) Encontrar las etiquetas con un atributo

HTML:

<form id="f1"><input name=""><select name=""><textarea name="">

Javascript:

const campos = document.querySelectorAll('#f1 [name]')

6) Encontrar las etiquetas cuyo atributo tiene un valor

HTML:

<a target="_blank">...<a target="_blank">...<form target="_blank">

Javascript:

const enlaces = document.querySelectorAll('a[target="_blank"]);

Manipulación de etiquetas

Una vez encontrada la etiqueta o etiquetas se puede operar con ellas de varios modos:

1) El contenido HTML de la etiqueta

HTML:

<p id="principal">Hola <strong>Pepe</strong></p>

Javascript:

const p = document.querySelector('#principal');

console.log(p.innerHTML); // Imprime 'Hola <strong>Pepe</strong>'

p.innerHTML = 'Adiós <em>María</em>'; // Cambia el texto del párrafo

console.log(p.innerHTML); // Imprime 'Adiós <em>María</em>'

2) El contenido en texto de una etiqueta

Se ignoran las etiquetas. Al leer desaparecen las etiquetas. Al escribir las etiquetas quedan escritas literalmente porque no son etiquetas, son texto.

console.log(p.textContent); // Imprime 'Hola Pepe' 

p.textContent = 'Adiós <em>María</em>'; // Cambia el texto 

3) El valor de un campo de un formulario: INPUT, SELECT y TEXTAREA

const selector = document.querySelector('#ciudad');
console.log(selector.value)
selector.value = 'BCN';

4) Cambiar un atributo de un elemento

Obtener es get y poner es set. Los getters y los setters.

enlace.setAttribute('href', 'https://www.proinf.net');
console.log(enlace.getAttribute('href'))
elemento.removeAttribute('href');

Algunos atributos se pueden cambiar directamente sin tener que usar los métodos anteriores:

enlace.id = 'manzana';
enlace.setAttribute('id', 'manzana');

enlace.title = 'Pulsa aquí';
enlace.setAttribute('title', 'Pulsa aquí');

enlace.className = 'naranja';
enlace.setAttribute('class', 'naranja');

5) Cambiar estilos CSS de la etiqueta

HTML:

<p style="background-color:red">

Javascript:

parrafo.style.backgroundColor = 'red';
parrafo.style.fontSize = '12pt';
parrafo.style.opacity = 0.5;
parrafo.style.boxShadow = '1px 1px 2px #ABCDEF';
parrafo.style.width = '300px';

Proinf.net