This site uses cookies own and third. If you continue to browse consider to accept the use of cookies. OK More Info.

Curso de JavaScript | 13. Usar DOM a través de getElementById()

  • 0 Replies
  • 448 Views

0 Members and 2 Guests are viewing this topic.

Offline Abarhild

  • *
  • Underc0der
  • Posts: 12
  • Actividad:
    0%
  • Reputación 2
    • View Profile
You are not allowed to view links. Register or Login

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

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

Code: (html5) You are not allowed to view links. Register or Login
<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://underc0de.org/foro">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:

Code: (html5) You are not allowed to view links. Register or Login
<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):

Code: (javascript) You are not allowed to view links. Register or Login
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.

Code: (javascript) You are not allowed to view links. Register or Login
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

Code: (javascript) You are not allowed to view links. Register or Login
document.getElementById('area1').innerHTML;
la siguiente construcción usando una variable:

Code: (javascript) You are not allowed to view links. Register or Login
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:

Code: (javascript) You are not allowed to view links. Register or Login
<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://underc0de.org/foro">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!
« Last Edit: September 12, 2022, 05:27:51 pm by AXCESS »