En este artículo, aprenderemos a obtener el atributo de datos del elemento en Javascript. Dado un documento HTML y la tarea es seleccionar los atributos de datos de un elemento usando JavaScript. Hay algunos métodos para resolver este problema que se detallan a continuación:
- Usando la propiedad del conjunto de datos
- Usando el método .getAttribute()
Discutiremos las dos formas de obtener el atributo de datos de un elemento.
Acercarse:
- Primero, seleccione el elemento que tiene atributos de datos.
- Podemos usar la propiedad del conjunto de datos para obtener acceso a los atributos de los datos o usar el método .getAttribute() para seleccionarlos escribiendo específicamente sus nombres.
Aquí, en los siguientes ejemplos, usaremos el método getElementById() que devolverá los elementos que tienen el ID dado que se pasa a la función. Se utiliza la función parseInt() que aceptará la string, el parámetro radix y los convertirá en un número entero. El método JSON.stringify() se usa para crear una string JSON a partir de él. Este método es útil para convertir un objeto en una string.
Ejemplo 1: este ejemplo utiliza la propiedad del conjunto de datos para obtener los atributos de datos de un elemento.
HTML
<!DOCTYPE HTML> <html> <head> <title> How to get the data attributes of an element using JavaScript ? </title> </head> <body align="center"> <h1 style="color:green;"> GeeksforGeeks </h1> <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> </p> <span data-typeId="123" data-name="name" data-points="10" data-important="true" id="span">This is the Element. <br> <br> <button onclick="GFG_Fun()"> click here </button> <p id="GFG_DOWN" style="font-size: 20px; font-weight: bold; color:green;"> </p> <script> var el_up = document.getElementById('GFG_UP'); var el_down = document.getElementById('GFG_DOWN'); var input = document.getElementById('span'); el_up.innerHTML = "Click on the button to get " + "the data attributes of element."; function GFG_Fun() { var jsonData = JSON.stringify({ id: parseInt(input.dataset.typeid), points: parseInt(input.dataset.points), important: input.dataset.important, dataName: input.dataset.name }); el_down.innerHTML = jsonData; } </script> </body> </html>
Producción:
Ejemplo 2: este ejemplo usa el método .getAttribute() para obtener los atributos de datos de un elemento.
HTML
<!DOCTYPE HTML> <html> <head> <title> How to get the data attributes of an element using JavaScript ? </title> </head> <body align="center"> <h1 style="color:green;"> GeeksforGeeks </h1> <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> </p> <span data-typeId="123" data-name="name" data-points="10" data-important="true" id="span">This is the Element. <br> <br> <button onclick="GFG_Fun()"> click here </button> <p id="GFG_DOWN" style="font-size: 20px; font-weight: bold; color:green;"> </p> <script> var el_up = document.getElementById('GFG_UP'); var el_down = document.getElementById('GFG_DOWN'); var input = document.getElementById('span'); el_up.innerHTML = "Click on the button to get " + "the data attributes of element."; function GFG_Fun() { var jsonData = JSON.stringify({ id: parseInt(input.getAttribute('data-typeId')), points: parseInt(input.getAttribute('data-points')), important: input.getAttribute('data-important'), dataName: input.getAttribute('data-name') }); el_down.innerHTML = jsonData; } </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA