{"id":9770,"date":"2022-05-10T13:00:00","date_gmt":"2022-05-10T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=9770"},"modified":"2022-05-09T09:25:16","modified_gmt":"2022-05-09T07:25:16","slug":"como-obtener-el-valor-de-un-id-en-javascript","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/como-obtener-el-valor-de-un-id-en-javascript\/","title":{"rendered":"\u00bfC\u00f3mo obtener el valor de un ID en JavaScript?"},"content":{"rendered":"\n

Si te est\u00e1s preguntando c\u00f3mo obtener el valor de un ID en JavaScript<\/strong>, est\u00e1s en el art\u00edculo adecuado. A continuaci\u00f3n te explico como puedes recuperar identificador que desees y diferentes funciones para que puedas realizar todas las pruebas necesarias. <\/p>\n\n\n\n

\u00a1Empecemos!<\/p>\n\n\n\n

\u00bfQu\u00e9 es un ID en JavaScript?<\/h2>\n\n\n\n

Lo primero que debes saber es qu\u00e9 es exactamente un ID en JavaScript. Al emplear este concepto, nos estamos refiriendo al valor que recibe el atributo \u00abid\u00bb de un determinado elemento HTML. Por ejemplo, el identificador del siguiente encabezado ser\u00eda \u00abdato\u00bb:<\/p>\n\n\n\n

<h1 id=\"dato\">Caronte Web Studio<\/h1><\/code><\/pre>\n\n\n\n
\u00bfC\u00f3mo ver el identificador de cualquier elemento web?<\/h2>\n\n\n\n
El valor de un identificador de cualquier elemento HTML no es directamente visible en el sitio web. Sin embargo, recuerda que para ver el ID de cualquier elemento HTML, puedes emplear el inspector de elementos. Siguiendo el ejemplo, en caso de inspeccionar una p\u00e1gina que cuenta con la l\u00ednea de c\u00f3digo anterior, visualizar\u00edamos el ID del encabezado de la siguiente manera:<\/p>\n\n\n\n
\"obtener<\/figure>\n\n\n\n
La propiedad id<\/h2>\n\n\n\n
Para obtener el valor de un ID en JavaScript hay que utilizar la propiedad id<\/strong>, a la cual se hace referencia en las documentaciones del lenguaje<\/a> como Element.id<\/strong>. <\/p>\n\n\n\n
El concepto de propiedad en JavaScript es avanzado, pero para definirlo de forma muy simple, daremos por v\u00e1lido que una propiedad es una caracter\u00edstica de un elemento HTML. En el ejemplo anterior, \u00abdato\u00bb es el valor de una caracter\u00edstica del encabezado de la web, concretamente, de su propiedad id.<\/p>\n\n\n\n
Antes de continuar, te voy a explicar algunas funciones b\u00e1sicas (fragmentos de c\u00f3digo) muy \u00fatiles para trabajar con JavaScript, como console.log(), getElementById() o getElementsByClass(). Si ya las conoces, puedes continuar la lectura en el siguiente punto<\/a>.<\/p>\n\n\n\n
Funciones \u00fatiles en JavaScript<\/h2>\n\n\n\n
Hay una serie de funciones (tambi\u00e9n llamadas m\u00e9todos) que emplearemos para obtener el valor de un ID en JavaScript de distintas formas. Se trata de funciones que en nuestro trabajo como programadores de sitios web y tiendas online<\/a> empleamos pr\u00e1cticamente a diario, por lo que te recomiendo que tomes nota.<\/p>\n\n\n\n
console.log()<\/h3>\n\n\n\n
\n
\n
Esta funci\u00f3n sirve para escribir un mensaje en la consola del inspector de elementos, de forma que el texto queda invisible para los usuarios de la web. Por ejemplo, podr\u00edamos emplearla para escribir la palabra \u00abhola\u00bb:<\/p>\n<\/div>\n\n\n\n
\n
console.log(\"hola\");<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\"obtener<\/figure><\/div>\n<\/div>\n\n\n\n
\n
Accediendo a la pesta\u00f1a \u00abConsole\u00bb del inspector de elementos, se mostrar\u00eda el mensaje \u00abhola\u00bb.<\/p>\n<\/div>\n<\/div>\n\n\n\n
document.getElementById()<\/h3>\n\n\n\n
\n
\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document<\/title>\n<\/head>\n\n<body>\n    <h1 id=\"dato\">Caronte Web Studio<\/h1>\n    <script>\n        console.log(document.getElementById(\"dato\"));\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n\n\n\n
\n
Esta funci\u00f3n permite recuperar todo el elemento HTML que tenga el ID que se le indique entre los par\u00e9ntesis. Por ejemplo, el c\u00f3digo document.getElementById(\u00abdato\u00bb), equivaldr\u00eda a decirle a la web: \u00abobt\u00e9n todo el elemento HTML que tenga el id dato<\/em>\u00ab.<\/p>\n\n\n\n
Es posible combinar esta funci\u00f3n con la anterior, de forma que se muestre en consola el elemento al que se est\u00e9 apuntando. Para verlo m\u00e1s claramente, te muestro un ejemplo con todo el c\u00f3digo necesario para ejecutarlo en un navegador. Puedes copiarlo, guardarlo en un archivo con extensi\u00f3n .html y abrirlo con un navegador. El resultado que se mostrar\u00e1 en consola es el siguiente:<\/p>\n<\/div>\n<\/div>\n\n\n\n
\"como<\/figure><\/div>\n\n\n\n
document.getElementsByClassName()<\/h3>\n\n\n\n
Esta funci\u00f3n es igual que la anterior, con la diferencia de que emplea la clase del elemento HTML para realizar la selecci\u00f3n. Recuerda que mientras los ID se deben utilizar para hacer referencia a un \u00fanico elemento HTML, las clases se asignan a m\u00faltiples elementos que tienen algo en com\u00fan. <\/p>\n\n\n\n
Es por ello que, si el documento HTML sigue unas buenas pr\u00e1cticas de desarrollo web, la funci\u00f3n document.getElementsByClass() se utilizar\u00e1 para hacer referencia a m\u00e1s de un elemento HTML. Veamos un ejemplo:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document<\/title>\n<\/head>\n\n<body>\n    <h1 id=\"dato\">Caronte Web Studio<\/h1>\n    <p class=\"texto\">hola mundo 1<\/p>\n    <p class=\"texto\">hola mundo 2<\/p>\n    <p class=\"texto\">hola mundo 3<\/p>\n    <p class=\"texto\">hola mundo 4<\/p>\n    <p class=\"texto\">hola mundo 5<\/p>\n    <script>\n        console.log(document.getElementsByClassName(\"texto\"));\n    <\/script>\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n
En estos casos, no es tan sencillo mostrar los elementos por consola, ya que la funci\u00f3n anterior devuelve un conjunto de elementos. Sin embargo, como te muestro en los siguientes ejemplos, puede ser muy \u00fatil.<\/p>\n\n\n\n
Obtener el valor de un ID con JavaScript conociendo el identificador o la clase<\/h2>\n\n\n\n
\n
\n
En caso de que conozcas el valor del ID que deseas almacenar, debes hacer uso de la funci\u00f3n getElementById() junto con la propiedad Element.id<\/strong>. Combinando dichos elementos con el m\u00e9todo console.log(), podemos obtener el siguiente resultado:<\/p>\n<\/div>\n\n\n\n
\n
console.log(document.getElementById(\"texto\").id);<\/code><\/pre>\n\n\n\n
\"conseguir<\/figure>\n<\/div>\n<\/div>\n\n\n\n
Tambi\u00e9n es posible seleccionar el ID a trav\u00e9s de la clase del elemento HTML. Por ejemplo, el siguiente c\u00f3digo obtiene y muestra en consola el identificador del primer elemento que tenga la clase \u00abtexto\u00bb:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document<\/title>\n<\/head>\n\n<body>\n    <h1 id=\"dato\">Caronte Web Studio<\/h1>\n    <p class=\"texto\" id=\"miTexto1\">hola mundo 1<\/p>\n    <p class=\"texto\" id=\"miTexto2\">hola mundo 2<\/p>\n    <p class=\"texto\" id=\"miTexto3\">hola mundo 3<\/p>\n    <p class=\"texto\" id=\"miTexto4\">hola mundo 4<\/p>\n    <p class=\"texto\" id=\"miTexto5\">hola mundo 5<\/p>\n\n    <script>\n        console.log(document.getElementsByClassName(\"texto\")[0].id);\n    <\/script>\n\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n
Obtener IDs en JavaScript: ejemplo avanzado<\/h2>\n\n\n\n
A continuaci\u00f3n expongo un ejemplo m\u00e1s avanzado para trabajar con los identificadores de JavaScript. El siguiente c\u00f3digo se\u00f1ala al primer elemento que tenga la clase \u00abtexto\u00bb, obtiene el valor de su atributo ID y lo almacena en una variable (mostr\u00e1ndolo en consola). En segundo lugar, define que cuando se produzca un scroll en la ventana, se dispare la funci\u00f3n denominada \u00abmiFuncion()\u00bb. Dicha funci\u00f3n modifica el valor de dicho identificador y muestra el nuevo por consola.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document<\/title>\n<\/head>\n\n<body>\n    <h1 id=\"dato\">Caronte Web Studio<\/h1>\n    <p class=\"texto\" id=\"miTexto1\">hola mundo 1<\/p>\n    <p class=\"texto\" id=\"miTexto2\">hola mundo 2<\/p>\n    <p class=\"texto\" id=\"miTexto3\">hola mundo 3<\/p>\n    <p class=\"texto\" id=\"miTexto4\">hola mundo 4<\/p>\n    <p class=\"texto\" id=\"miTexto5\">hola mundo 5<\/p>\n    <div style=\"height:100rem\"><\/div>\n    <script>\n        let id = document.getElementsByClassName(\"texto\")[0].id;\n        console.log(id);\n        window.onscroll = function() {\n            miFuncion()\n        };\n\n        function miFuncion() {\n\n            id = \"nuevoID\";\n            console.log(id);\n        }\n    <\/script>\n\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n
He a\u00f1adido un elemento div con una altura determinada simplemente para que la pesta\u00f1a de tu navegador te muestre siempre la opci\u00f3n de hacer scroll \ud83d\ude09<\/p>\n\n\n\n
Empleando estas funciones y propiedades, puedes realizar una gran cantidad de tareas. Por ejemplo, el c\u00f3digo del ejemplo anterior servir\u00eda para dar unos estilos diferentes al elemento en funci\u00f3n del ID que tiene, de forma que ser\u00eda posible definir distintas reglas CSS para antes y despu\u00e9s del scroll del usuario.<\/p>\n\n\n\n
Conclusi\u00f3n<\/h2>\n\n\n\n
Para obtener el valor de un ID en JavaScript, hay que hacer lo siguiente:<\/p>\n\n\n\n