Ipapaliwanag ng post na ito ang paggamit ng mga katangian ng data sa JavaScript.
Paano Gamitin ang Mga Katangian ng Data sa JavaScript?
Sa JavaScript, ang ' datos Ang mga katangian ay ginagamit para sa pag-iimbak ng karagdagang impormasyon na hindi ipinapakita sa web page. Ang impormasyong ito ay maaaring isulat, i-access, basahin, at dynamic na baguhin ayon sa mga kinakailangan ng user. Ginawa ng seksyong ito ang tinalakay na gawain nang praktikal sa mga katangian ng data.
Syntax
< data ng elemento -*= 'somevalue' >
Sa itaas na syntax:
- “ elemento ” ay kumakatawan sa elemento ng HTML kung saan ginagamit ang katangian ng data.
- “ data-* ” ay nagsasaad ng maramihang(*) mga katangian ng data na nagsisimula sa prefix (data-) ibig sabihin, keyword ng data na sinusundan ng isang gitling.
- ilang halaga: Tinutukoy nito ang halaga ng katangian ng data.
Ngayon, gamitin ang syntax sa itaas upang lumikha ng isang katangian ng data.
Lumikha ng Mga Katangian ng Data
< div id = 'myDiv' datos - pangalan = 'Alvin' datos - edad = '40' datos - kasarian = 'lalaki' > div >Ang nakasaad na one-line na HTML code ay lumilikha ng sumusunod na ' pangalan ng data ”, “ edad ng datos ', at ang ' data-kasarian ” attribute sa loob ng elementong “div” na ang id ay “myDiv”.
Basahin/i-access natin ang mga ginawang katangian ng data.
Halimbawa 1: Basahin/I-access ang Data Attribute Gamit ang 'dataset' Property
Inilalapat ng halimbawang ito ang property na 'dataset' upang basahin/i-access ang partikular o lahat ng attribute ng data.
Una, tingnan ang ' pindutan 'elemento na tumatawag sa ' jsFunc() 'kapag nauugnay ito' onclick ” kaganapan ay na-trigger sa pag-click sa pindutan:
< button sa pag-click = 'jsFunc()' > I-access ang Data Attribute pindutan >Ngayon, magpatuloy sa kahulugan ng 'jsFunc()':
< iskrip >function na jsFunc ( ) {
const elemento = dokumento. getElementById ( 'myDiv' ) ;
console. log ( elemento. dataset ) ;
}
iskrip >
Sa mga linya ng code sa itaas:
- Ang ' jsFunc() ' unang nagdedeklara ng variable na 'elem' na naglalapat ng ' document.getElementById() ” paraan upang ma-access ang idinagdag na elemento ng div sa pamamagitan ng id nitong “myDiv”.
- Susunod, ginagamit nito ang ' console.log() 'paraan na gagamit ng ' dataset ” property upang ma-access ang mga katangian ng data ng na-access na elemento ng div at ipakita ang mga ito sa web console.
Output
Pindutin ang F12 upang buksan ang web console:
Makikita na sa pag-click sa ibinigay na pindutan, ang console ay nagpapakita ng isang ' DOMStringMap ” na naglalaman ng lahat ng mga katangian ng data ng elemento ng div.
I-access ang Partikular na Halaga
Kung gusto ng user na ma-access ang partikular na attribute ng data, tukuyin ang pangalan nito gamit ang property na 'dataset' tulad nito:
< iskrip >makuha ang function ( ) {
const elemento = dokumento. getElementById ( 'myDiv' ) ;
console. log ( elemento. dataset . pangalan ) ;
}
iskrip >
Sa oras na ito, ang mga katangian ng data ng 'pangalan' ay ina-access gamit ang ' dataset ” ari-arian.
Output
Makikita na ang console ay nagpapakita lamang ng halaga ng mga tinukoy na katangian ng data sa pag-click sa pindutan.
Halimbawa 2: Basahin/I-access ang Attribute ng Data Gamit ang Paraang “getAttribute()”.
Ang halimbawang ito ay gumagamit ng 'getAttribute()' na paraan upang basahin/i-access ang mga katangian ng data.
Sa sitwasyong ito, kasama rin ang elemento ng button ng unang halimbawa:
< button sa pag-click = 'jsFunc()' > I-access ang Data Attribute pindutan >Tingnan natin ang functionality ng 'getAttribute()' na paraan:
< iskrip >function na jsFunc ( ) {
const elemento = dokumento. getElementById ( 'myDiv' ) ;
console. log ( elemento. getAttribute ( 'pangalan ng data' ) ) ;
console. log ( elemento. getAttribute ( 'edad ng data' ) ) ;
console. log ( elemento. getAttribute ( 'data-gender' ) ) ;
}
iskrip >
Sa snippet ng code sa itaas:
- Inilalapat ng variable na 'elem' ang ' document.getElementById() ” paraan upang ma-access ang idinagdag na elemento ng div gamit ang id nitong “myDiv”.
- Susunod, ang ' console.log() Ang pamamaraan ay gumagamit ng ' getAttribute() ” para makuha ang tinukoy na value ng attribute na “data” ng kinuhang div element at pagkatapos ay ipakita ito sa web console.
- Ang parehong gawain ay ginagawa upang ma-access ang natitirang tinukoy na mga katangian ng data.
Tandaan: Tinutukoy ng pamamaraang “getAttribute()” ang attribute ng data na may prefix na “data” na sinusundan ng hyphen(-) ibig sabihin, (data-) na hindi nangangailangan habang ginagamit ang property na “dataset()”.
Output
Ang output sa itaas ay nagpapakita ng lahat ng tinukoy na mga halaga ng katangian ng data sa pag-click sa pindutan.
Halimbawa 3: Sumulat ng Data Attribute Gamit ang 'dataset' Property
Isinulat ng halimbawang ito ang mga attribute ng data gamit ang property na 'dataset'.
Ang nilalaman ng elemento ng button ay binago ayon sa kasalukuyang senaryo:
< button sa pag-click = 'jsFunc()' > Sumulat ng Data Attribute pindutan >Ngayon, isulat ang bagong katangian ng data sa idinagdag na elemento ng div:
< iskrip >function na jsFunc ( ) {
const elemento = dokumento. getElementById ( 'myDiv' ) ;
elemento. dataset . id = 'tao'
console. log ( elemento. dataset ) ;
}
iskrip >
Sa itaas na bloke ng code:
- Ang ' dataset Ang ” property ay nagsusulat ng bagong pangalan ng attribute ng data na “id” na may tinukoy na string value.
- Susunod, ang ' console.log() Ginagamit ng ” ang property na “dataset” upang ipakita ang interface ng “DOMStringMap” na naglalaman ng bagong nakasulat na attribute ng data sa web console.
Output
Dito, ipinapakita ng console ang 'DOMStringMap' na naglalaman ng bagong attribute ng data na 'id' na nakasulat gamit ang property na 'dataset'.
Halimbawa 4: I-update ang Halaga ng Attribute ng Data
Ina-update ng halimbawang ito ang kasalukuyang value ng isang partikular na attribute ng data sa tulong ng property na 'dataset'.
Binago ang text ng elemento ng button ayon sa ibinigay na sitwasyon:
< button sa pag-click = 'jsFunc()' > I-update ang Data Attribute pindutan >Ngayon, lumipat sa seksyon ng JavaScript:
< iskrip >function na jsFunc ( ) {
const elemento = dokumento. getElementById ( 'myDiv' ) ;
elemento. dataset . pangalan = 'John'
console. log ( elemento. dataset . pangalan ) ;
}
iskrip >
Sa bloke ng code sa itaas, ang tinukoy na halaga ng katangian ng data na 'pangalan' ay ina-update sa tulong ng ' dataset ” ari-arian.
Output
Ipinapakita ng console ang na-update na halaga ng mga tinukoy na katangian ng data sa pag-click sa button.
Halimbawa 5: Tanggalin ang Data Attribute
Tinatanggal ng halimbawang ito ang partikular na katangian ng data sa pamamagitan ng paggamit ng keyword na 'tanggalin'.
Ang teksto ng elemento ng button ay binago ayon sa kinakailangan:
< button sa pag-click = 'jsFunc()' > Tanggalin ang Data Attribute pindutan >Ngayon, sundin ang block ng JavaScript code:
< iskrip >function na jsFunc ( ) {
const elemento = dokumento. getElementById ( 'myDiv' ) ;
tanggalin ang elemento. dataset . edad ;
console. log ( elemento. dataset . edad ) ;
}
iskrip >
Ang snippet ng code sa itaas ay tumutukoy sa “ tanggalin ” keyword na may property na “dataset” para tanggalin ang attribute ng na-access na data.
Output
Napansin na ang console ay nagpapakita ng ' hindi natukoy ” sa isang pag-click sa button na malinaw na nagpapatunay na ang na-access na katangian ng data ay tinanggal.
Konklusyon
Sa JavaScript, ang mga katangian ng data ay maaaring gamitin sa iba't ibang paraan tulad ng pagbabasa, pag-access, pagsulat, pag-update, at pagtanggal ng mga ito ayon sa mga kinakailangan. Ang lahat ng mga gawaing ito ay maaaring maisagawa sa tulong ng built-in na ' dataset ” ari-arian. Gayunpaman, maa-access din ng user ang katangian ng data nang paisa-isa sa tulong ng ' getAttribute() ” paraan. Ang post na ito ay praktikal na ipinaliwanag ang paggamit ng mga katangian ng data sa JavaScript.