Curso de JavaScript desde cero

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 como nodeList, 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]);
Elemento li de lista en el DOM

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.
Tablas HTML
<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.
  1. Obtén el país "Egipto" en la consola.
  2. Obtén el país "Japón" en la consola.
  3. Obtén el país "Nueva Zelanda" en la consola.
  4. Crea una frase que diga "Los países de América en la tabla son México, Argentina, Colombia y Perú.". Por supuesto, debes utilizar getElementsByTagName para formar la frase. Al igual que con el ejemplo del temario.
  5. 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.

Twitter

Programación Fácil YouTube

Suscríbete

Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.