DOMreferenser

DOMreferenser är JavaScript-variabler som pekar på objekt i Document Object Model, vanligtvis ett eller flera element i ett HTML-dokument. En referens gör det möjligt att läsa och ändra egenskaper, modifica innehåll, justera stilar och lägga till eller ta bort händelselyssnare utan att söka upp elementet igen varje gång.

Få domreferenser kan göras på olika sätt, exempelvis med document.getElementById('id'), document.querySelector('#id'), document.querySelectorAll('.klass'), document.getElementsByClassName('klass') och document.getElementsByTagName('tag'). Skillnaden mellan metoderna är hur många element de returnerar och om resultaten uppdateras när DOM ändras. getElementById returnerar ett enskilt Element eller null; querySelector returnerar första matchningen; querySelectorAll returnerar en NodeList (statisk). getElementsByClassName och getElementsByTagName returnerar live HTMLCollections som uppdateras vid förändringar i dokumentet.

Typiskt arbetar man med referenser till Element eller Node. Att hålla fast vid en referens (till exempel konstanten btn = document.getElementById('knapp')) kan förbättra prestandan genom att undvika onödig återhämtning av elementet vid varje händelse eller uppdatering. Det är vanligt att använda flera referenser samtidigt och ibland använda eventdelegation för att minska antalet lyssnare.

Vanliga fallgropar inkluderar att köra DOM-sökningar innan sidan är färdigladdad, vilket gör att referenserna blir null. Lösningen är att vänta på DOMContentLoaded eller placera skriptet längst ner i body. En annan fallgrop är att hålla referenser till element som tas bort, vilket kan leda till minnesläckor om de inte rensas.

Exempel: const btn = document.getElementById('myBtn'); btn.addEventListener('click', function() { console.log('klick!'); });

DOMreferenser är grundläggande för effektiv klientside scripting och interaktiva webbapplikationer.