¿Cómo obtener el valor de las etiquetas HTML?- Curso de JavaScript de cero a máster - Capítulo 52

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.

Página HTML

<!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>

Código JavaScript

console.log(document.getElementsByTagName("li"));
								

terminal Resultado en la consola terminal

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.

Código JavaScript

let elementosLi = document.getElementsByTagName("li");

console.log(elementosLi[0]);

terminal Resultado en la consola terminal

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 guión 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.

Código JavaScript

let elementosLi = document.getElementsByTagName("li");

console.log("Los colores primarios de RGB son",
elementosLi[0].innerHTML + ", " +
elementosLi[1].innerHTML +  ", " +
elementosLi[2].innerHTML + ".");

terminal Resultado en la consola terminal

Los colores primarios de RGB son rojo, verde, azul.