DOM (Document Object Model) är en programmeringsgränssnitt som representerar HTML-dokument som en trädstruktur. Genom att manipulera DOM kan du ändra innehållet och utseendet på en webbsida.
Bra DOM-praxis
- Använd getElementById istället för querySelector. getElementById är mycket snabbare, särskilt om du behöver hämta ett enda element.
- Använd textContent eller innerText. Dessa egenskaper ger dig tillgång till textelementens innehåll, vilket är snabbare än att använda innerHTML.
- Undvik onödiga DOM-manipulationer. Börja med att utföra en virtuell DOM-manipulation och uppdatera det faktiska DOM-trädet endast när det behövs.
- Minimera återflöden och ommålningar. Återflöden är beräkning av elementens storlek och läge, medan ommålningar är teckningen av elementen på skärmen. Undvik att göra ändringar som utlöser dessa processer, t.ex. att ändra elementens storlek eller position.
Exempel på effektiv DOM-manipulation
// Hämta elementet med id="element"
const element = document.getElementById("element");
// Ändra elementinnehållet
element.textContent = "Nytt innehåll";
// Lägg till en klass till elementet
element.classList.add("ny-klass");
Guide för förbättrad tillgänglighet
- Använd ARIA-attribut. Aria-attribut (Accessible Rich Internet Applications) ger ytterligare information om element för skärmläsare och andra assisterande tekniker.
- Säkerställ att element har unika identifierare. Detta är viktigt för navigering och interaktion med webbsidan.
- Ange rullningsregioner. Detta gör att användare med nedsatt rörlighet kan navigera på sidan utan att använda musen.
- Använd tab-index för att styra navigering. Genom att ange tab-index för element kan du bestämma ordningen i vilken de fokuseras när du trycker på tabbtangenten.