Obtener los datos que tienen las etiquetas HTML con JavaScript
Capítulo 52: ¿Cómo obtener el valor de las etiquetas HTML?
Hasta ahora, has visto como indicar un nodo por su ID con getElementById. Veamos en este capítulo una nueva forma de acceder a los elementos del DOM.
getElementsByTagName
La traducción de getElementsByTagName al español es, obtener elementos por nombre de etiqueta. Bien, esto es lo que hace exactamente.
Cuidado con la letra 's' de getElement's'ByTagName, a diferencia de getElement' 'ByID, esto va en plural, ya que elementos por etiqueta puede haber más de uno, por ID solo 1.
Palabra del lenguaje nº 79 encontrada.
getElementsByTagName se encarga de buscar etiquetas HTML iguales al valor dado y devuelve una colección con todas ellas.
<!doctype html>
<html>
<head>
<title>Curso de JavaScript</title>
</head>
<body>
<h4>Colores primarios RGB</h4>
<ul>
<li>rojo</li>
<li>verde</li>
<li>azul</li>
</ul>
<h4>Colores secundarios RGB</h4>
<ul>
<li>magenta</li>
<li>amarillo</li>
<li>cian</li>
</ul>
</body>
<script src="test.js"></script>
</html>console.log(document.getElementsByTagName("li"));
Hay 6 elementos <li>.
HTMLCollection(6) [li, li, li, li, li, li]
0: li
1: li
2: li
3: li
4: li
5: li
length: 6¿Qué es HTMLCollection?
Palabra del lenguaje nº 80 encontrada.
HTMLCollection es una colección comonodeList, pero para elementos HTML y no todos los nodos como#text, por ejemplo.
¿Cómo podemos utilizar esto para algo?
Veamos un ejemplo. Vamos a almacenar el valor devuelto en la consola en una variable. Mediante esa variable, podremos llamar a los 6 elementos por separado con su número de posición.
let elementosLi = document.getElementsByTagName("li");
console.log(elementosLi[0]);
Conseguido. Ahora el problema, es que ¿para qué nos puede servir tener el elemento por separado? La respuesta es que así podemos manipularlo de forma individual.
Primero de todo, ::marker se corresponde a la viñeta o guion del elemento de lista, se trata de un pseudo-elemento de CSS. Por el momento, en este curso no nos interesa, pero quería aclararlo por si no sabías que era.
Obtener el contenido de un elemento HTML con innerHTML
Vamos a ver como trabajar con el contenido de los elementos.
Palabra del lenguaje nº 81 encontrada.
Gracias a la propiedad innerHTML podemos obtener (get) o establecer (set) el contenido de un elemento HTML.
let elementosLi = document.getElementsByTagName("li");
console.log("Los colores primarios de RGB son",
elementosLi[0].innerHTML + ", " +
elementosLi[1].innerHTML + ", " +
elementosLi[2].innerHTML + ".");Los colores primarios de RGB son rojo, verde, azul.Ejercicios de JavaScript
Copia la siguiente página HTML para realizar los ejercicios de este capítulo.
Se trata de una tabla con unos cuantos países.
En la línea 58, tienes el enlace a la hoja .js. Si la tienes con otro nombre, recuerda renombrarla.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
<title>Curso de JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
</head>
<body style="margin:1em">
<table class="table table-primary table-bordered table-striped table-hover">
<thead class="table-success">
<tr>
<th>Número de país</th>
<th>África</th>
<th>América</th>
<th>Asia</th>
<th>Europa</th>
<th>Oceanía</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Egipto</td>
<td>México</td>
<td>Bután</td>
<td>Inglaterra</td>
<td>Australia</td>
</tr>
<tr>
<th>2</th>
<td>Etiopía</td>
<td>Argentina</td>
<td>China</td>
<td>España</td>
<td>Micronesia</td>
</tr>
<tr>
<th>3</th>
<td>Marruecos</td>
<td>Colombia</td>
<td>Japón</td>
<td>Italia</td>
<td>Samoa</td>
</tr>
<tr>
<th>4</th>
<td>Libia</td>
<td>Perú</td>
<td>Turquia</td>
<td>Dinamarca</td>
<td>Nueva Zelanda</td>
</tr>
</tbody>
</table>
</body>
<script src="test.js"></script>
</html>Intenta no complicarte mucho con los siguientes ejercicios. Solo tienes que hacer lo mismo que hemos hecho con la lista. Los elementos <td>, también van con su posición, del 0 hasta el último.
Olvida todos los elementos que no sean <td>.
En todos los ejercicios, deberás utilizar la propiedad innerHTML.
Doy estas aclaraciones, porque hay diversas formas de realizar este ejercicio.
- Obtén el país "Egipto" en la consola.
- Obtén el país "Japón" en la consola.
- Obtén el país "Nueva Zelanda" en la consola.
- Crea una frase que diga
"Los países de América en la tabla son México, Argentina, Colombia y Perú.". Por supuesto, debes utilizargetElementsByTagNamepara formar la frase. Al igual que con el ejemplo del temario. - Crea un bucle que itere toda la fila 3 (Marruecos, Colombia...). Puesto que aún faltan ciertas cosas por ver, quiero que lo hagas contando el número de posición de Marruecos hasta Samoa.
La solución la encontrarás aquí: Haz click aquí.
Comentarios
Si te quedan dudas sobre el temario, sobre JavaScript o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.
