Ya hemos visto que con el API QuerySelector podemos ejecutar selectores que accedan a los elementos DOM de nuestra página web. Ahora vamos a ver como podemos obtener el ID con API QuerySelector para poder recuperar un elemento en concreto.
Recuerda que para que una página esté bien formada no deberá de tener repetidos los ID y que un ID corresponderá a un solo elemento.
Para obtener el ID con API QuerySelector lo primero que haremos es definir una web dónde tengamos un elemento con dicho ID.
Esto es un mensaje
Ahora lo siguiente será acceder al ID «mensaje». Para ello vamos a ejecutar el método document.querySelector al cual le pasaremos el selector que referencie al ID.
Los selectores de ID se referencian anticipándoles una almohadilla.
#id
Es por ello que el código para obtener el ID con API QuerySelector será el siguiente:
var mensaje = document.querySelector("#mensaje");
En la variable mensaje habremos dejado un elemento DOM, así que podemos obtener su contenido mediante métodos como .innerHTML.
console.log("El contenido de los elementos de la clase mensaje '" + mensaje.innerHTML + "'");
En próximos artículos veremos como a parte de obtener el ID con API QuerySelector podemos montar una cantidad amplia de selectores que nos filtren los elementos.