En esta práctica de JavaScript he puesto en práctica el uso del método getElementsByTagName() para acceder a elementos del DOM.
El usuario pulsa en un determinado párrafo y se le muestran todos los párrafos de un texto. Y si pulsa en otro determinado párrafo se borran todos los párrafos mostrados anteriormente.
Para poder comprender el código de esta práctica es muy importante conocer el uso del método getElementsByTagName() en JavaScript y la forma de acceder a los elementos del DOM. Como ayuda puedes echarle un vistazo a los siguientes enlaces:
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Práctica de JavaScript</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<script src="funciones.js" type="text/javascript"></script>
</head>
<body>
<div id="caja"></div>
<p>Este es el primer párrafo de esta página.</p>
<p>Este es el segundo párrafo.</p>
<p>Y este es el tercer párrafo.</p>
<p id="parrafoMostrar">Pulsa en este párrafo para volver a verlos todos en el recuadro de la derecha.</p>
<p id="parrafoBorrar">Y pulsa aquí para borrar el recuadro de la derecha.</p>
</body>
</html>Código CSS
#caja {
width: 400px;
height: 210px;
border: 1px solid black;
float: right;
padding: 10px;
}Código JavaScript
window.onload = inicializar;
function inicializar() {
document.getElementById("parrafoMostrar").addEventListener("click", acceder, false);
document.getElementById("parrafoBorrar").addEventListener("click", borrar, false);
}
function acceder() {
let caja = document.getElementById("caja");
let parrafos = document.getElementsByTagName("p");
caja.innerHTML = "";
for (let i = 0; i < parrafos.length; i++){
caja.innerHTML += parrafos[i].innerHTML + "<br><br>";
}
}
function borrar() {
let caja = document.getElementById("caja");
caja.innerHTML = "";
}Demostración
Esta obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial-SinObraDerivada 4.0 Internacional.