Kan vi tilordne et objekt til et HTML-element i ren JavaScript uten jQuery

Jeg vil lagre et objekt som et attributt på et HTML-element! La oss anta at jeg har et div-element, og når jeg klikker på div-elementet, vil jeg hente verdiene til objektet fra div-elementet slik at jeg kan bruke det i klik-funksjonen.

Jeg har sett folk gjøre det i jQuery, men jeg vil ha det i ren JavaScript siden jeg skriver en TypeScript-kode og ikke vil ha jQuery

ex: 
var myNewObject={
"first_name": "Sam",
"last_name": "carter"
}
var div=document.getElementByID("myID");
div.setAttribute("myobject",myNewObject);

<div onclick="somefunc()>
</div>
function somefunc()
{
     console.log(document.getAttribute("myobject").first_name);

}

Forventet output: Sam
Faktisk output: Feil

Svar #1

Du kan lagre hvilken som helst Javascript-objekt på et HTMLElement direkte:

const div = document.createElement('div');
div.myobject = { hello: 'world' };

Bare strenger kan lagres i attributter, og strengrepresentasjonen av et objekt er [object Object]. Hvis du må bruke attributter, kan du serialisere objektet og lagre det, og deretter deserialisere det når du henter det igjen:

const obj = { hello: 'world' };
const a = document.querySelector('#a');
a.setAttribute('myobject', JSON.stringify(obj));

const obj2 = JSON.parse(a.getAttribute('myobject'));
console.log(obj2.hello);
<div id="a">Hello</div>

Å lagre tilstand i DOM anses generelt som en dårlig praksis uansett.

Relaterte artikler