Foro de elhacker.NET

Usar DOM a través de getElementById()
Echemos un vistazo a getElementById().

Queremos apuntar a un elemento específico en nuestra página HTML.

Código

<html>
<head>
	<title>Titulo de la pagina</title>
</head>
<body>
    <h1>Encabezado 1</h1>
    <p>Primer parrafo con texto</p>
    <p>Segundo parrafo con texto</p>
    <a href="https://foro.elhacker.net">Texto del link</a>
</body>
</html>

¿Cómo podemos usar javascript para obtener específicamente, por ejemplo, el primer párrafo? Para hacer esto, usamos la instrucción de javascript getElementById().

Nuestro elemento deseado ahora necesita un identificador único. Podemos agregar el atributo id y un nombre único a cualquier elemento HTML directamente en el código HTML. Aquí se aplican las siguientes reglas para un nombre único:

No deben de haber espacios.
No deben de haber guiones.
No deben de haber caracteres especiales (por lo que es mejor usar solo letras de la a a la z y números del 0 al 9).

En nuestro ejemplo, demos a nuestro primer párrafo el atributo HTML id y el nombre area1. Aquí el fragmento del código HTML extendido:

Código

<p id="area1">Primer parrafo con texto</p>

Ahora podemos agregar el nombre a nuestro comando de javascript getElementById(). Además, a través de document., decimos que se use el documento HTML actual (es decir, nuestro árbol DOM):

Código

document.getElementById('area1');

Si ejecutamos nuestro programa javascript, todavía no sucede nada visible.

Ahora podemos acceder a un elemento específico.

Nuestro elemento contiene el comando HTML completo y el contenido "Primer parrafo con texto" encerrado por el comando, es decir, la completa rama seleccionada, incluidas todas las ramillas y hojas de nuestro árbol DOM.

Si solo queremos el texto y no la rama completa - en otras palabras, no queremos que se devuelvan atributos ni comandos HTML - javascript nos ofrece la extensión a través de innerHTML.

Código

document.getElementById('area1').innerHTML;

Por supuesto, estas notaciones de puntos hacen que las instrucciones en javascript sean cada vez más largas y, por lo tanto, más y más confusas. Y en la mayoría de las veces, en repetidas veces se necesita acceso al mismo elemento.

Por lo tanto, se construye a partir del siguiente código

Código

document.getElementById('area1').innerHTML;

la siguiente construcción usando una variable:

Código

let parrafo1 = document.getElementById('area1');
console.log(parrafo1.innerHTML);
console.log(parrafo1);
alert(parrafo1.innerHTML);

Expandi nuestro programa existente y ve si hay una salida en la consola. Hay un 50% de posibilidades de que funcione (salvo por errores tipográficos).

¡Primero probalo antes de seguir leyendo!

¡En serio!

¿Funcionó? ¿Obtuviste el resultado esperado? Entonces nuestro programa javascript se insertó después de las salidas HTML en el archivo:

Código

<html>
<head>
	<title>Titulo de la pagina</title>
</head>
<body>
    <h1>Encabezado 1</h1>
    <p id="area1">Primer parrafo con texto</p>
    <p>Segundo parrafo con texto</p>
    <a href="https://foro.elhacker.net">Texto del link</a>
<script>
let parrafo1 = document.getElementById('area1');
document.write("<br>" + parrafo1.innerHTML);
document.write("<br>" + parrafo1);
alert(parrafo1.innerHTML);
</script>
</body>
</html>

Si no funcionó, nuestras instrucciones de javascript se insertaron antes de las salidas HTML de los párrafos. Entonces no viene ningún contenido, sino mensajes de error en forma de "Uncaught TypeError: Connot read property …".

¡Probalo, porque en el próximo capítulo nos haremos independientes de la posición de nuestras declaraciones de javascript en nuestro archivo!