Het Document Object Model

Het Document Object Model, of DOM, is de actuele boom van paginaobjecten in de browser. JavaScript leest en wijzigt deze objecten om de pagina bij te werken zonder opnieuw te laden. De browser biedt de DOM-API aan; JavaScript is de taal waarmee je die aanroept.

Begin bij het document

document is het toegangspunt. document.documentElement verwijst naar <html>, document.head naar <head> en document.body naar <body>. Het browsertabblad wordt vertegenwoordigd door window, waarvan de eigenschap document naar dit document verwijst.

Elk onderdeel in de boom is een knooppunt. Elementen vertegenwoordigen tags; tekstknooppunten bevatten tekens; commentaarknooppunten bevatten HTML-commentaar; het documentknooppunt staat boven de elementen van de pagina. Hun nodeType-waarden zijn respectievelijk 1, 3, 8 en 9. Elk element is een knooppunt, maar tekst en commentaar zijn geen elementen.

Lees de familierelaties

<ul id="menu"><li>Home</li><li>About</li></ul>

De lijst is de ouder van twee itemelementen met dezelfde ouder. Elk item is een kind van de lijst. Het eerste item heeft een tekstknooppunt als kind met de inhoud “Home”. De lijst is een voorouder van dat tekstknooppunt en de tekst is een nakomeling van de lijst. Deze relaties beschrijven de nesting, niet de posities op het scherm.

Spaties en regeleinden tussen tags worden meestal tekstknooppunten met witruimte. Een ingesprongen lijst kan daardoor twee kindelementen hebben, maar meer dan twee kindknooppunten. children en firstElementChild geven alleen elementen terug; childNodes en firstChild nemen ook tekst en commentaar mee.

Vergelijk de boom met de broncode

Bij het ontleden wordt opmaak omgezet in de boom. Daarbij kan de opmaak worden aangevuld of hersteld. Rijen die rechtstreeks binnen een <table> zijn geschreven, krijgen een <tbody> als ouder. Ontbrekende elementen <html>, <head> of <body> kunnen ook worden toegevoegd. Selecteer vanuit de daadwerkelijke boom, inclusief deze door de parser toegevoegde elementen.

Wijzigingen door scripts hebben invloed op het actuele DOM van de browser, niet op het HTML-bestand op de server. “Paginabron bekijken” toont de oorspronkelijke HTML, terwijl Elements in DevTools de actuele boom toont. Opnieuw laden bouwt een nieuw DOM op; een wijziging alleen slaat de achterliggende gegevens niet op.

Inspecteer een object

Klik met de rechtermuisknop op een element en kies “Inspecteren”. Voer $0 in de console in om naar dat geselecteerde element te verwijzen. console.log($0) toont het als opmaak; console.dir($0) toont de eigenschappen. Klap een ingesprongen lijst uit om de witruimteknooppunten naast de itemelementen te zien.

Met boomeigenschappen kan een script vanaf een element dat het al heeft nabije inhoud bereiken. Kies of dat pad tekst en commentaar moet meenemen of alleen elementen.

Kies knooppunten of elementen

Knooppunteigenschappen zijn onder meer parentNode, childNodes, firstChild, lastChild, previousSibling en nextSibling. De bijbehorende elementvarianten zijn parentElement, children, firstElementChild, lastElementChild, previousElementSibling en nextElementSibling. children is een HTMLCollection; childNodes is een NodeList.

<ul id="tasks">
  <li>Buy milk</li>
  <li>Call Sam</li>
</ul>

Hier is tasks.childNodes.length gelijk aan 5: twee elementen en drie stukken witruimte. tasks.children.length is gelijk aan 2. tasks.firstChild is tekst met witruimte, terwijl tasks.firstElementChild.textContent gelijk is aan “Buy milk”. Indexen beginnen bij 0, dus tasks.children[1] is het tweede item.

Volg een kort pad

const tasks = document.querySelector("#tasks");
const first = tasks.firstElementChild;
const second = first.nextElementSibling;
console.log(second.textContent);
console.log(second.parentElement === tasks);

De uitvoer is “Call Sam”, gevolgd door true. tasks.lastElementChild bereikt rechtstreeks hetzelfde item, net als tasks.children[tasks.children.length - 1].

Handel een ontbrekend verwant knooppunt af

De nextElementSibling van het laatste item is null. Een element zonder kindelementen heeft firstElementChild === null en een lege children-collectie. De parentNode van het HTML-hoofdelement is het document, maar de parentElement ervan is null.

Een eigenschap van null uitlezen veroorzaakt een TypeError. Controleer eerst of gebruik second.nextElementSibling?.textContent, dat undefined geeft als er geen volgend element bestaat.

Zoek een omhullend item

closest(selector) controleert het huidige element en daarna de voorouders en geeft de dichtstbijzijnde overeenkomst terug, of null. Een knop binnen <li class="task" data-id="7"> kan button.closest(".task") gebruiken; de dataset.id van het gevonden item is “7”. matches(selector) toetst daarentegen alleen het huidige element en geeft een booleaanse waarde terug.

Lange paden zoals el.parentElement.parentElement.nextElementSibling zijn afhankelijk van de precieze nesting. Een toegevoegd omhullend element verandert hun betekenis. Gebruik selectors voor benoemde delen, korte navigatie voor stabiele relaties en closest() voor een omhullend item.

Een selector zet een beschrijving van een element om in een objectreferentie. Begin met de kleinste zoekopdracht die het gewenste element aanwijst en controleer daarna of het element is gevonden voordat je het wijzigt.

Zoek met een CSS-selector of een id

document.querySelector(selector) geeft het eerste overeenkomende element in documentvolgorde terug. De methode accepteert bekende CSS-selectors: "h1", ".price", "#cart", "nav a" of 'input[type="email"]'. Als niets overeenkomt, geeft de methode null terug.

document.getElementById("cart") zoekt rechtstreeks naar een id. Het argument is alleen de id. getElementById("#cart") zoekt naar een id die daadwerkelijk het hekje bevat, terwijl querySelector("cart") naar een tag <cart> zoekt. Gebruik querySelector("#cart") voor de id-selector.

Id's moeten uniek zijn. Als gekopieerde opmaak twee elementen dezelfde id geeft, geven deze zoekopdrachten het eerste element in documentvolgorde terug. Herstel de dubbele opmaak in plaats van te verwachten dat een zoekopdracht op id de tweede kopie bereikt.

Zoek binnen een container

Stel dat meerdere kaarten een element met de klasse name hebben. Selecteer eerst de profielkaart en doorzoek daarna de nakomelingen:

const card = document.querySelector("#profile");
if (card) {
  const name = card.querySelector(".name");
  if (name) name.textContent = "Maya";
}

De zoekopdracht binnen de container blijft beperkt tot de profielkaart, zodat een eerdere .name elders niet stoort. De container zelf is geen kandidaat in zijn eigen querySelector()-zoekopdracht. Gewone elementen ondersteunen deze methode, maar getElementById() hoort bij document.

Onderscheid geen overeenkomst van een ongeldige selector

Een geldige zoekopdracht zonder overeenkomst geeft null. Als je null.textContent probeert in te stellen, ontstaat een TypeError. Controleer dus of optionele inhoud bestaat:

const banner = document.querySelector(".banner");
if (banner) banner.textContent = "Sale ends Friday";

Een ongeldige CSS-selector veroorzaakt een SyntaxError voordat er een resultaat kan zijn. Voor <p id="1st"> is querySelector("#1st") ongeldig omdat het cijfer in die CSS-id-selector moet worden ge-escaped. getElementById("1st") gebruikt een letterlijke id en werkt direct.

Voer de code uit nadat de benodigde opmaak bestaat

Een klassiek extern script in <head> wordt uitgevoerd voordat de browser de body heeft ontleed. Een zoekopdracht naar een latere alinea geeft daarom null terug, ook als de HTML die alinea bevat. Gebruik <script src="app.js" defer></script> om de code na het ontleden uit te voeren, gebruik een modulescript of plaats het script vlak voor </body>. Modulescripts worden standaard uitgesteld. Het attribuut defer heeft geen effect op een klassiek inlinescript.

Voor een HTML-pagina die begint met <!DOCTYPE html> zijn id- en klasseselectors hoofdlettergevoelig: .Price vindt class="price" niet. HTML-tagselectors zijn niet hoofdlettergevoelig, dus "LI" en "li" komen beide overeen met lijstitems. Als een zoekopdracht mislukt, controleer dan de spelling, de selectorsyntaxis, de zoekcontainer en het uitvoeringstijdstip van het script.

Gebruik querySelectorAll() wanneer dezelfde bewerking op meerdere elementen moet worden toegepast. Het resultaat is een collectie, dus je moet bepalen hoe je die doorloopt en of je een momentopname of een dynamisch bijgewerkte weergave nodig hebt.

Lees en doorloop een NodeList

document.querySelectorAll(".note") geeft een NodeList met overeenkomende elementen in documentvolgorde terug. Zonder overeenkomsten krijg je een lege NodeList met lengte 0. De collectie zelf is nog steeds een truthy-waarde; if (notes) vertelt je niet of die elementen bevat. Controleer notes.length.

Een NodeList ondersteunt indexen, length, forEach() en for...of, maar is geen array en heeft geen map(), filter() of reduce(). Converteer de NodeList wanneer je die methoden nodig hebt:

const weights = Array.from(document.querySelectorAll(".weight"))
  .map(el => Number(el.textContent));
const total = weights.reduce((sum, weight) => sum + weight, 0);

Voor elementen met “4.5”, “12” en “3.25” is de array [4.5, 12, 3.25] en het totaal 19,75 kg. De conversie naar getallen is belangrijk omdat de tekstwaarden strings zijn.

Een collectie is geen gecombineerd element. Als je notes.textContent instelt, wijzig je geen enkele notitie, en notes.classList.add("saved") veroorzaakt een fout omdat de NodeList geen classList heeft. Pas de wijziging op elk element toe:

const notes = document.querySelectorAll(".note");
notes.forEach(note => note.classList.add("saved"));

Vergelijk statische en dynamisch bijgewerkte resultaten

De NodeList van querySelectorAll() is statisch: welke elementen erbij horen, ligt vast wanneer de zoekopdracht wordt uitgevoerd. De elementen waarnaar de lijst verwijst, zijn nog steeds de daadwerkelijke objecten, zodat hun tekst of klassen kunnen veranderen.

getElementsByClassName("note") en getElementsByTagName("li") geven een dynamisch bijgewerkte HTMLCollection terug. Ook children wordt dynamisch bijgewerkt. Deze collecties werken bij welke elementen erbij horen wanneer het DOM verandert. Ze ondersteunen indexen en for...of, maar geen forEach().

Bewaar in een lijst met drie .item-elementen zowel list.getElementsByClassName("item") als list.querySelectorAll(".item"). Voeg een vierde overeenkomend element toe. De dynamisch bijgewerkte collectie heeft nu lengte 4; de momentopname heeft nog steeds lengte 3.

Voorkom de valkuil van een krimpende collectie in een lus

Stel dat vier elementen behoren tot een dynamisch bijgewerkte collectie met de naam live:

for (let i = 0; i < live.length; i++) {
  live[i].classList.remove("item");
}

Als de eerste klasse wordt verwijderd, verdwijnt dat element uit de collectie. Het volgende element schuift op naar index 0, maar de lus gaat verder naar index 1 en slaat het over. Slechts twee van de vier verliezen de klasse. Doorloop Array.from(live) of een momentopname van querySelectorAll() wanneer je verandert welke elementen bij de collectie horen.

Controleer spaties in selectors

.task.done betekent één element met beide klassen. .task .done betekent een .done-nakomeling binnen een .task. Tel voor <li class="task done"> voltooide items met document.querySelectorAll(".task.done").length. Een komma combineert selectors: "h2, h3" geeft overeenkomsten in documentvolgorde terug, niet eerst alle koppen van het ene type en daarna die van het andere.

Tekst en HTML zijn verschillende soorten invoer. Platte tekst moet als tekens verschijnen; HTML beschrijft elementen die de browser moet opbouwen. De keuze heeft gevolgen voor zowel de paginastructuur als de mogelijkheid dat externe tekst ongewenste code uitvoert.

Lees en vervang tekst

Voor <p id="msg">Total: <strong>3</strong> items</p> is msg.textContent gelijk aan “Total: 3 items”. De eigenschap voegt tekst van de nakomelingen van het element samen zonder hun tags mee te nemen en bevat ook tekst die door CSS is verborgen.

Als je textContent instelt, vervang je alle kinderen door een tekstknooppunt. Na msg.textContent = "Cart is empty" bestaat het kind <strong> niet meer binnen de alinea. Als je msg.textContent = "<b>Hi</b>" instelt, verschijnen de letterlijke tekens “Hi”; er wordt geen vet element gemaakt.

Tekstwaarden zijn strings. Als een teller “4” bevat, levert count.textContent + 1 de waarde “41” op. Converteer voordat je optelt:

count.textContent = Number(count.textContent) + 1;

De optelling geeft het getal 5 en de toewijzing toont de tekstvorm daarvan, “5”.

Lees tekst die de lay-out volgt

Bij een gerenderd element volgt innerText de weergegeven tekst en lay-out. De eigenschap laat nakomelingen weg die met display: none zijn verborgen en bevat regeleinden die de lay-out volgen. Voor het uitlezen kan een lay-outberekening nodig zijn. Gebruik textContent voor gewone tekstbewerkingen; kies innerText wanneer je de gerenderde tekst nodig hebt. Als het element zelf is losgekoppeld of niet wordt gerenderd, valt innerText terug op de tekstinhoud ervan.

Ontleed HTML bewust

innerHTML leest de opmaak binnen een element. Als je de eigenschap instelt, wordt de string ontleed en worden de kinderen vervangen:

msg.innerHTML = "Total: <strong>5</strong> items";

Dit maakt een nieuw <strong>-element. Het is geschikt voor opmaak die je zelf hebt geschreven en beheert. Gebruik voor tekst van een gebruiker of externe gegevens textContent en bouw structuur met createElement().

Het invoegen van niet-vertrouwde HTML kan cross-site scripting (XSS) mogelijk maken: code die door een aanvaller wordt beheerd, wordt uitgevoerd in de browser van de bezoeker. Een geïnjecteerde afbeelding kan een attribuut onerror bevatten dat code uitvoert wanneer de afbeelding niet kan worden geladen. Scripttags die via innerHTML worden ingevoegd, worden niet uitgevoerd, maar dat maakt andere geïnjecteerde HTML niet veilig. Als je alleen scripttags blokkeert, blijft deze aanvalsroute open.

Behoud bestaande kinderen wanneer je inhoud toevoegt

list.innerHTML += "<li>New</li>" leest de bestaande opmaak, voegt een string eraan toe en ontleedt en vervangt vervolgens de volledige verzameling kinderen. Hun objectidentiteit blijft niet behouden. Een variabele die een oud kind bevat, bevat nog steeds dat losgekoppelde object en getypte waarden in vervangen invoerelementen kunnen verloren gaan. Gebruik append() met nieuwe knooppunten of insertAdjacentHTML("beforeend", markup) voor vertrouwde opmaak om inhoud toe te voegen zonder bestaande kinderen opnieuw te maken.

outerHTML bevat zowel de eigen tag van het element als de inhoud. Als je de eigenschap instelt, vervang je het element zelf. Een opgeslagen referentie verwijst na die vervanging nog steeds naar het oude, losgekoppelde element; die schakelt niet automatisch over naar het nieuwe element.

Een attribuut is een naam en waarde in HTML. Een eigenschap hoort bij het JavaScript-object dat een element vertegenwoordigt. Veel standaardattributen hebben bijbehorende eigenschappen, maar die eigenschappen kunnen waarden verwerken of een ander soort toestand weergeven.

Werk met een attribuut op naam

Bij <img src="logo.png" alt="Company logo"> initialiseert de browser eigenschappen zoals img.src en img.alt. Je kunt ook methoden gebruiken die de attribuutnaam als string accepteren:

• getAttribute(name) geeft een string terug, of null als het attribuut ontbreekt.
• setAttribute(name, value) voegt een attribuut toe of wijzigt het en slaat de waarde op als tekst.
• hasAttribute(name) geeft aan of het attribuut aanwezig is.
• removeAttribute(name) verwijdert het.

Zo wijzigt link.setAttribute("href", "https://example.com/help") het doel van een link. Als er geen attribuut target is, geeft link.getAttribute("target") null terug en geen lege string.

Lees de waarde die je daadwerkelijk nodig hebt

Op een pagina op https://example.com/shop/ heeft de link <a href="/about"> de attribuutwaarde “/about”. De eigenschap href is de opgeloste URL, “https://example.com/about”. Lees het attribuut wanneer je de waarde precies zoals geschreven nodig hebt en de eigenschap wanneer je de opgeloste URL nodig hebt.

Eigenschappen kunnen andere typen dan string hebben. button.disabled is een booleaanse waarde; input.maxLength is een getal. Attribuutmethoden geven nog steeds strings of null terug. Eigenschapsnamen zijn ook hoofdlettergevoelige JavaScript-namen: el.id werkt, terwijl el.ID een andere eigenschap is en normaal gesproken undefined is.

De meeste namen zijn bekend, maar er zijn uitzonderingen. Het HTML-attribuut class is toegankelijk via className en classList. Het attribuut for van een label is de eigenschap htmlFor:

label.htmlFor = "email";

Dit koppelt het label aan het element waarvan de id “email” is.

Behandel booleaanse attributen op basis van aanwezigheid

Booleaanse attributen zijn onder meer disabled, checked, required en readonly. Door de aanwezigheid is het attribuut waar, ook als de tekst “false” is. Deze code schakelt een knop uit:

button.setAttribute("disabled", "false");

Om de knop in te schakelen, stel je button.disabled = false in of roep je button.removeAttribute("disabled") aan. button.toggleAttribute("disabled", isBusy) voegt het attribuut toe als isBusy waar is en verwijdert het als die waarde onwaar is.

Beschrijf bedieningselementen toegankelijk

ARIA-attributen geven informatie aan ondersteunende technologie. Attribuutmethoden zijn handig om ze in te stellen, zoals button.setAttribute("aria-label", "Close dialog") om een knop met alleen een pictogram een naam te geven. Hun waarden zijn strings; een waarde voor de uitgeklapte toestand is bijvoorbeeld “true” of “false”.

Gebruik eigenschappen voor gebruikelijke bewerkingen zoals img.src = "photo.jpg" of input.disabled = true. Gebruik attribuutmethoden wanneer de naam in een variabele staat, de precieze geschreven waarde van belang is of het attribuut geen bijbehorende eigenschap heeft die je gebruikt.

Volg een eigenschapswijziging terug naar HTML

const field = document.createElement("input");
field.disabled = true;
console.log(field.hasAttribute("disabled"));
console.log(typeof field.disabled);
console.log(typeof field.getAttribute("disabled"));
field.removeAttribute("disabled");
console.log(field.disabled);

De uitvoer is true, “boolean”, “string” en false. Als je de eigenschap instelt, wordt het booleaanse attribuut toegevoegd. Als je dat attribuut uitleest, krijg je nog steeds tekst terug, ook al is de eigenschap booleaans. Als je het verwijdert, wordt de eigenschap weer onwaar. De methode en de eigenschap geven dezelfde aanwezigheid weer via verschillende waardetypen.

Een element kan een id bevatten voor de gegevens die het weergeeft, zonder die id op het scherm te tonen. Formulierbedieningselementen bevatten ook waarden, maar hun actuele inhoud lees je via eigenschappen uit. Beide soorten waarden moeten vaak worden geconverteerd voordat je ze vergelijkt of ermee rekent.

Sla zelfgekozen gegevens op met data-attributen

HTML-namen die beginnen met data- bewaren informatie voor scripts:

<li data-task-id="17" data-priority="high">Prepare slides</li>

Het object dataset maakt deze attributen toegankelijk. Verwijder het voorvoegsel data- en verander elk streepje gevolgd door een kleine letter in die hoofdletter: data-task-id wordt dataset.taskId. data-priority wordt dataset.priority.

li.dataset.dueDate = "2026-11-05";
delete li.dataset.priority;

De toewijzing maakt data-due-date="2026-11-05". De delete verwijdert data-priority. Data-attributen kunnen ook worden geselecteerd met CSS-attribuutselectors, zoals '[data-priority="high"]'.

Een zelfbedacht attribuut zoals taskid="17" is ongeldige HTML en maakt geen eigenschap li.taskid. getAttribute("taskid") kan het nog steeds uitlezen, maar data-task-id is de juiste vorm voor zelfgekozen gegevens.

Converteer stringwaarden bewust

li.dataset.taskId is “17”, een string. li.dataset.taskId === 17 is onwaar omdat de typen verschillen. Als id's in de gegevens getallen zijn, gebruik dan Number(li.dataset.taskId) === 17. Een ontbrekend data-attribuut geeft undefined. De toewijzing li.dataset.count = 3 slaat de tekst “3” op.

Dit vormt een bruikbare verbinding van een weergegeven item terug naar het bijbehorende object:

const id = Number(li.dataset.taskId);
const task = tasks.find(task => task.id === id);

De vergelijking gebruikt nu twee getallen. Als geen object die id heeft, geeft find() undefined terug; controleer dit voordat je eigenschappen uitleest.

Lees de actuele waarde van een veld

Een <input> bevat de getypte waarde niet als tekstinhoud. Lees input.value uit, dat een string is, of wijs er een waarde aan toe om het veld te wijzigen. input.value = "" maakt het veld leeg.

Bij <input id="qty" value="1"> is qty.value gelijk aan “3” nadat de gebruiker 3 heeft getypt, maar qty.getAttribute("value") is nog steeds “1”. Het attribuut levert de beginwaarde; de eigenschap levert de actuele waarde. Een selectievakje werkt op vergelijkbare wijze: de eigenschap checked geeft de actuele booleaanse toestand aan, terwijl het attribuut de aanvankelijke geselecteerde toestand beschrijft.

Gebruik voor elk bedieningselement de juiste waarde

Zelfs <input type="number"> heeft een value die een string is. Als de hoeveelheid “3” is en elk item 0,25 kg weegt, geeft Number(qty.value) * 0.25 de waarde 0,75 kg. Maar qty.value + 1 geeft “31”, omdat + een string en een getal samenvoegt. Een <select> geeft de waarde van de geselecteerde optie terug via select.value. Lees voor een selectievakje checkbox.checked uit, niet checkbox.value, wanneer je wilt weten of het is geselecteerd.

Bewaar vaste vormgevingsregels in CSS en laat JavaScript vervolgens de klassen wijzigen waarmee die regels worden geselecteerd. Een klasse kan een toestand zoals “voltooid”, “actief” of “fout” uitdrukken zonder de bijbehorende kleuren en decoraties in code te herhalen.

Voeg klassenamen toe en verwijder ze

Stel dat het stijlblad bevat:

.done { text-decoration: line-through; color: #888; }

item.classList.add("done") past het uiterlijk voor een voltooid item toe. item.classList.remove("done") verwijdert die toestand en laat andere klassen intact. Beide methoden accepteren meerdere namen; een bestaande klasse toevoegen of een ontbrekende verwijderen kan geen kwaad.

contains("done") geeft een booleaanse waarde terug. replace("wide", "narrow") vervangt een aanwezige klasse door een andere. toggle("active") voegt een ontbrekende klasse toe of verwijdert een aanwezige en geeft terug of de klasse daarna bestaat.

Volg een klassewijziging

Begin met <div class="card">:

card.classList.add("active", "wide");
const active = card.classList.toggle("active");
const replaced = card.classList.replace("wide", "narrow");

Na de eerste regel zijn de klassen “card active wide”. Het schakelen verwijdert “active”, dus active is false en de klassen worden “card wide”. Het vervangen van “wide” laat “card narrow” over en geeft true terug. Een latere card.classList.contains("active") is false.

Stel een klasse in op basis van een voorwaarde

Wanneer gegevens de gewenste toestand bepalen, geef je een tweede argument door:

row.classList.toggle("overdue", daysLeft < 0);

Een negatieve daysLeft zorgt dat de klasse aanwezig is; anders ontbreekt de klasse. Als je de aanroep herhaalt, blijft die toestand behouden. Een gewone toggle("overdue") zou de toestand bij elke aanroep omkeren.

Behoud de rest van het klasseattribuut

className is de volledige klassestring. card.className = "active" vervangt alle bestaande klassen, waaronder “card”. Gebruik deze toewijzing als je de hele verzameling wilt vervangen; gebruik classList voor wijzigingen van afzonderlijke toestanden.

Geef alleen klassenamen door, zonder leestekens van CSS-selectors. classList.add(".active") voegt een klassenaam met een letterlijke punt toe; dat is niet de klasse die overeenkomt met .active. Eén argument mag geen spaties bevatten: classList.add("big red") veroorzaakt een InvalidCharacterError. Schrijf classList.add("big", "red") voor twee klassen.

Controleer de CSS als het uiterlijk niet verandert

Als een klasse geen zichtbaar effect heeft, inspecteer dan de klassenaam en de regel in DevTools. Controleer of een regel ontbreekt of verkeerd is gespeld en of er overschreven declaraties zijn doorgestreept in het deelvenster Styles.

Gebruik klassen voor vaste ontwerpen en inlinestijlen voor berekende waarden. Het object style leest en schrijft inlinedeclaraties, niet alle regels die invloed hebben op een element.

Schrijf CSS-waarden via style

CSS-namen met streepjes worden camelCase-eigenschappen in JavaScript. background-color wordt backgroundColor, font-size wordt fontSize en z-index wordt zIndex:

box.style.backgroundColor = "gold";
box.style.width = "250px";

Stijlwaarden zijn strings. Neem een eenheid op wanneer de eigenschap die vereist. Op een pagina in de standaardmodus wordt de toewijzing box.style.width = 250 genegeerd, omdat een breedte die niet nul is een CSS-eenheid nodig heeft. De string “0” is geldig voor een breedte van nul.

style.setProperty() gebruikt daarentegen de CSS-schrijfwijze:

box.style.setProperty("background-color", "gold");
document.documentElement.style.setProperty("--accent", "#0a7d5a");

De CSS-variabele op het hoofdelement levert de waarde voor regels die naar var(--accent) verwijzen.

Zet een berekening om in een CSS-waarde

Een voortgangsbalk toont 3 voltooide taken van de 8:

const percent = (3 / 8) * 100;
bar.style.width = `${percent}%`;

De verhouding 0,375 wordt 37,5 procent. De templateliteral levert “37.5%”, inclusief de vereiste eenheid.

Verwijder een tijdelijke overschrijving

Stel box.style.backgroundColor = "" in of roep box.style.removeProperty("background-color") aan om die inlinedeclaratie te verwijderen. De browser past dan de overige regels uit het stijlblad toe. Gebruik de CSS-naam met streepjes bij removeProperty().

Wees voorzichtig met style.cssText. De toewijzing box.style.cssText = "color: red" vervangt de volledige inlinestijl, zodat een bestaande inlinebreedte verloren gaat. Als je één stijleigenschap wijzigt, blijven de andere inlinedeclaraties intact.

Lees wat de browser toepast

Als een stijlblad een alinea rood maakt maar de alinea geen inlinekleur heeft, is p.style.color een lege string. Gebruik getComputedStyle(p).color voor de toegepaste waarde, vaak “rgb(255, 0, 0)”. Berekende waarden zijn alleen-lezen; wijzig de klasse of inlinedeclaratie om het uiterlijk te veranderen.

Inlinedeclaraties gaan vóór gewone regels uit het stijlblad, maar toepasselijke declaraties met !important kunnen voorrang krijgen. Als een klassewijziging geen effect lijkt te hebben, controleer dan of er een inlinestijl is achtergebleven die de regel overschrijft.

Als je een paneel verbergt, blijft het in het DOM, zodat het met de bestaande inhoud en veldwaarden kan terugkeren. Als je het verwijdert, haal je het uit de boom. Kies voor verbergen bij een paneel dat terugkomt en voor verwijderen bij een item waarvan de gegevens niet meer bestaan.

Gebruik de eigenschap hidden

panel.hidden = true voegt de gewone verborgen toestand toe. De standaardopmaak van de browser verbergt het paneel zonder ruimte in de lay-out over te laten. panel.hidden = false verwijdert die toestand en toont het paneel weer.

Een stijlblad kan deze standaardinstelling overschrijven. Zo kan .panel { display: flex; } een verborgen paneel zichtbaar maken. Neem het volgende op waar de verborgen toestand altijd voorrang moet hebben:

[hidden] { display: none !important; }

Je kunt de zichtbaarheid ook met een CSS-klasse regelen. Bij .is-hidden { display: none; } voegt menu.classList.toggle("is-hidden", !isOpen) de verbergklasse toe als het menu gesloten is. Controleer het stijlblad als de klasse aanwezig is maar een andere displaydeclaratie voorrang heeft.

Vergelijk drie manieren om te verbergen

display: none verwijdert de ruimte van het element uit de lay-out en verbergt het voor schermlezers. visibility: hidden maakt het onzichtbaar terwijl de ruimte behouden blijft en verbergt het ook voor schermlezers. opacity: 0 maakt het transparant maar behoudt de ruimte; er kan nog steeds op worden geklikt en het blijft beschikbaar voor schermlezers. Alleen transparantie is daarom geen goede manier om een paneel te sluiten dat niet langer beschikbaar mag zijn.

Deze effecten gaan over zichtbaarheid en lay-out, niet over verwijdering. Een verborgen invoerveld kan de getypte waarde behouden omdat hetzelfde invoerobject in de boom blijft.

Houd de beschrijving van het bedieningselement actueel

Een knop die bij een uitklapbaar paneel hoort, moet aangeven of het paneel is uitgeklapt. Stel aria-expanded in op de string “true” als het open is en “false” als het gesloten is. Baseer die waarde en de zichtbaarheid van het paneel op dezelfde toestand.

Voer voor een antwoordpaneel dat begint als <div id="answer-1" hidden>, met referenties genaamd answer en button, het volgende uit:

const willOpen = answer.hidden;
answer.hidden = !willOpen;
button.setAttribute("aria-expanded", String(willOpen));

Aanvankelijk is answer.hidden gelijk aan true, dus is willOpen waar. De toewijzing stelt hidden in op onwaar en toont het paneel. Het attribuut van de knop wordt “true”. Als je dezelfde instructies opnieuw uitvoert, begin je met hidden op onwaar, verberg je het paneel en schrijf je “false” naar het attribuut.

Onderzoek een verschil

Als de knop “uitgeklapt” aankondigt terwijl het paneel verborgen is, zijn de twee waarden niet samen bijgewerkt. Als hidden waar is maar het paneel nog zichtbaar is, inspecteer dan de berekende display en de verantwoordelijke CSS-regel. Het eerste probleem is een inconsistente toestand van de toepassing; bij het tweede overschrijft een stijl de verborgen toestand. Door zowel de DOM-eigenschappen als de toegepaste CSS uit te lezen, kun je ze onderscheiden.

Een nieuw element verschijnt niet alleen doordat je het hebt gemaakt. Maak eerst het object, geef het daarna inhoud en attributen en voeg het ten slotte in het document in. Vóór het invoegen kun je een hele geneste structuur in het geheugen samenstellen.

Bouw één volledig item

const li = document.createElement("li");
li.textContent = "Water the plants";
li.className = "task";
li.dataset.id = "4";
document.querySelector("#tasks").append(li);

createElement("li") maakt een leeg element. De volgende regels vullen het; de laatste voegt het in als laatste kind van de bestaande takenlijst. Dit levert <li class="task" data-id="4">Water the plants</li> op. De aanroep heeft een tagnaam nodig, geen opmaak: createElement("<li>") veroorzaakt een InvalidCharacterError. Stel klassen en attributen in nadat je het element hebt gemaakt.

Voor geneste inhoud maak je afzonderlijk een span voor de titel en een knop, stel je hun tekst in en roep je li.append(title, button) aan. Voeg daarna het samengestelde item in de lijst in. document.createTextNode("…") maakt rechtstreeks tekst; als je een string aan append() doorgeeft, wordt ook een tekstknooppunt ingevoegd.

Kies een invoegpositie

• parent.append(...) voegt toe na de bestaande kinderen.
• parent.prepend(...) voegt toe vóór de bestaande kinderen.
• element.before(...) voegt eerdere knooppunten met dezelfde ouder toe.
• element.after(...) voegt volgende knooppunten met dezelfde ouder toe.

Elke methode accepteert meerdere knooppunten en strings. Strings worden als tekst behandeld, dus list.append("<li>New</li>") bouwt geen item. De punthaken verschijnen als tekens binnen de lijst.

Oudere methoden komen nog steeds voor in code. appendChild(node) accepteert één knooppunt en geeft het terug; de methode accepteert geen string. append() geeft undefined terug. parent.insertBefore(newNode, referenceNode) voegt een knooppunt in vóór een bestaand kind; met null als referentie voeg je aan het einde toe.

Begrijp het verschil tussen verplaatsen en kopiëren

Een knooppunt kan maar één plaats in de boom innemen. Als je een bestaand knooppunt invoegt, verplaats je het. Bij een lijst in de volgorde a, b, c verplaatst list.prepend(list.lastElementChild) c naar het begin, zodat c, a, b ontstaat. Er blijft geen tweede c aan het einde staan.

Dit verklaart ook een veelvoorkomende lusfout: als je één <li> buiten een lus maakt en die herhaaldelijk toevoegt, blijft er één item over. Elke iteratie wijzigt en verplaatst hetzelfde object. Maak bij elke iteratie een nieuw element binnen de lus wanneer de pagina meerdere items nodig heeft, of maak afzonderlijke klonen.

Voeg vertrouwde opmaak naast bestaande inhoud in

insertAdjacentHTML(position, markup) ontleedt HTML zonder bestaande kinderen te vervangen. De vier positienamen zijn "beforebegin" en "afterend" voor knooppunten met dezelfde ouder buiten het element, en "afterbegin" en "beforeend" voor kinderen binnen het element. list.insertAdjacentHTML("beforeend", "<li>New</li>") voegt een ontleed item toe. Gebruik dit alleen voor vertrouwde opmaak; externe tekst hoort in textContent. insertAdjacentElement() en insertAdjacentText() gebruiken dezelfde positienamen voor een element of platte tekst.

Een element verwijderen verandert de boom, maar wist niet elke referentie naar dat object. Bij vervangen ontstaat een vergelijkbaar onderscheid: het nieuwe object neemt de plaats in, terwijl opgeslagen variabelen nog naar het oude kunnen verwijzen.

Verwijder één element of meerdere overeenkomsten

element.remove() koppelt dat element los. parent.removeChild(child) is de oudere vorm via de ouder en geeft het verwijderde knooppunt terug. Als een variabele het knooppunt nog bevat, kan het script het uitlezen of later opnieuw invoegen.

Om voltooide taken te verwijderen, selecteer je een statische collectie en doorloop je die met een lus:

document.querySelectorAll(".task.done")
  .forEach(task => task.remove());

Bij vijf taken, waarvan er twee als voltooid zijn gemarkeerd, blijven er zo drie over. Een element verwijderen verandert niet welke referenties de statische NodeList bevat, dus de lus bezoekt beide geselecteerde taken.

Tel niet vooruit door een krimpende dynamisch bijgewerkte lijst

list.children wordt dynamisch bijgewerkt. Bij zes kinderen verwijdert een voorwaartse lus die items[i] verwijdert er maar drie. Na de eerste verwijdering schuift het tweede element naar index 0, maar i gaat verder naar 1. Het volgende oorspronkelijke kind wordt overgeslagen en dezelfde verschuiving herhaalt zich.

Maak een momentopname voordat je alle huidige kinderen verwijdert:

Array.from(list.children).forEach(item => item.remove());

Om een container alleen leeg te maken, is list.replaceChildren() duidelijker. De container wordt ook leeg als je list.textContent = "" of list.innerHTML = "" instelt. Een lege string ontleedt geen externe inhoud.

Vervang één knooppunt of alle kinderen

old.replaceWith(newElement) zet een nieuw knooppunt op de plaats van het oude. Bij <p id="status">Loading…</p> vervangt document.querySelector("#status").replaceWith(list) het bericht door de lijst. parent.replaceChildren(a, b, c) vervangt alle kinderen van de ouder in één bewerking en behoudt de ouder zelf.

Dit verschil is van belang voor opgeslagen referenties. Een variabele die de ouder bevat, blijft na replaceChildren() naar de ouder verwijzen, maar referenties naar de verwijderde kinderen wijzen nu naar losgekoppelde objecten. Als je een container vervangt met replaceWith(), wordt ook die container losgekoppeld.

Kopieer het element met of zonder nakomelingen

element.cloneNode(true) maakt een diepe kopie, inclusief nakomelingen en attributen. cloneNode() of cloneNode(false) kopieert het element en de attributen zonder de kinderen. Een gekloond lijstitem zonder nakomelingen bevat geen tekst van het oorspronkelijke item.

Een kloon is aanvankelijk losgekoppeld en moet worden ingevoegd. De kloon neemt ook de id van het origineel over. Geef de kloon een nieuwe id of verwijder dat attribuut voordat je die op dezelfde pagina plaatst, zodat selectie op id betrouwbaar blijft.

Handel optionele elementen af

Als een zoekopdracht niets kan vinden, roep dan niet direct een methode aan op het resultaat. document.querySelector("#promo").remove() veroorzaakt een fout als er geen promotie bestaat. document.querySelector("#promo")?.remove() doet in dat geval veilig niets. Bij een verplichte container is een ontbrekend resultaat een nuttig signaal om de selector en het uitvoeringstijdstip van het script te controleren voordat je de structuur probeert bij te werken.

Renderen betekent dat je gegevens omzet in een zichtbare DOM-structuur. Houd de array als bron en bouw voor elk object een element. Plaats gegevenswaarden in textContent, zodat ze tekst blijven, ook als ze punthaken bevatten.

Bouw voor elk object één element

Gebruik deze boekobjecten:

const books = [
  { id: 1, title: "Dune", pages: 412 },
  { id: 2, title: "Emma", pages: 474 },
  { id: 3, title: "Beloved", pages: 324 }
];
function createBookItem(book) {
  const li = document.createElement("li");
  li.dataset.id = String(book.id);
  li.textContent = `${book.title} (${book.pages} pages)`;
  return li;
}
const list = document.querySelector("#books");
list.append(...books.map(createBookItem));

map() roept de opbouwfunctie eenmaal per boek aan en levert drie afzonderlijke elementen op. Spreadsyntaxis geeft die elementen als afzonderlijke argumenten door aan append(). De weergave luidt “Dune (412 pages)”, “Emma (474 pages)” en “Beloved (324 pages)”. De pagina-aantallen tellen op tot 1.210.

Zonder spreadsyntaxis ontvangt list.append(books.map(createBookItem)) één array. De methode zet die array om in tekst met strings zoals “[object HTMLLIElement]” in plaats van de itemelementen in te voegen.

De opgeslagen id koppelt het weergegeven element aan de gegevens. Lees Number(li.dataset.id) uit voordat je die waarde vergelijkt met numerieke boek-id's en gebruik daarna books.find(book => book.id === id).

Handel ontbrekende en lege gegevens af

Als een optioneel auteursveld ontbreekt, toont directe interpolatie “undefined”. Gebruik book.author ?? "Unknown author" als terugvaloptie wanneer het veld null of undefined is. Terugval bij null of undefined laat andere waarden, waaronder 0 en een lege string, ongewijzigd.

Als de array leeg is, toon dan een bericht zoals “Nog geen boeken”. Een leeg resultaat moet de gebruiker vertellen dat er momenteel geen items zijn. Vervang bij opnieuw renderen de oude weergave, zodat een eerder bericht of eerdere items niet naast het nieuwe resultaat blijven staan.

Begrijp wat een aanpak met HTML-strings doet

Een vertrouwde array kan worden omgezet in HTML-strings die je met join("") samenvoegt voordat je ze aan innerHTML toewijst. Door het samenvoegen verdwijnen de komma's die bij conversie van de array naar een string anders zouden worden ingevoegd. Deze aanpak ontleedt elke geïnterpoleerde waarde als HTML. Gebruik de aanpak waarbij je elementen opbouwt als waarden van externe bronnen kunnen komen.

Bouw een geldige tabelstructuur

Bouw voor tabelgegevens één <tr> per object en één <td> voor elk weergegeven veld. Voeg de rijen toe aan de <tbody> van de tabel. Voor metingen uit Oslo bij 4,25 °C en Caïro bij 28,5 °C kan de temperatuurcel reading.temp.toFixed(1) gebruiken: dit toont “4.3” en “28.5”. toFixed() geeft een string terug met het gevraagde aantal decimalen. toLocaleString() maakt daarentegen de waarde op volgens de landinstelling van de gebruiker, die een decimale komma kan gebruiken. Pas de opmaak toe bij de weergave, zodat numerieke gegevens beschikbaar blijven voor berekeningen.

Bouw beide cellen voordat je de rij invoegt

Voor een bestaand leeg tabelgedeelte met de naam tbody rendert dit de metingen:

const readings = [{ city: "Oslo", temp: 4.25 }, { city: "Cairo", temp: 28.5 }];
const rows = readings.map(reading => {
  const row = document.createElement("tr");
  const city = document.createElement("td");
  const temperature = document.createElement("td");
  city.textContent = reading.city;
  temperature.textContent = reading.temp.toFixed(1) + " °C";
  row.append(city, temperature);
  return row;
});
tbody.replaceChildren(...rows);

Elke iteratie maakt een nieuwe rij en twee nieuwe cellen. Door beide cellen te vullen voordat je de rij toevoegt, blijft de veldvolgorde expliciet. Door rows met spreadsyntaxis door te geven, bied je de twee rijknooppunten afzonderlijk aan; de laatste vervanging verwijdert ook eventuele eerdere rijen.

Als een lijst veel items bevat, bouw je de nieuwe inhoud buiten de pagina op en voeg je die samen in. Een DocumentFragment groepeert knooppunten zonder een omhullend element toe te voegen. Met een template schrijf je een herhaalde structuur in HTML en vul je voor elk object een nieuwe kopie.

Verzamel knooppunten in een fragment

const fragment = document.createDocumentFragment();
for (const book of books) {
  fragment.append(createBookItem(book));
}
list.append(fragment);

Het fragment begint buiten het document. Elk nieuw item wordt een kind ervan. Als je het fragment toevoegt, worden de kinderen in hun bestaande volgorde naar de lijst verplaatst; het fragment zelf wordt niet als omhullend element ingevoegd. Nadat 100 items naar een lege lijst zijn verplaatst, heeft de lijst 100 kinderen en het fragment 0.

Dit patroon groepeert het invoegen en houdt de opbouwcode overzichtelijk. Het garandeert geen bepaalde snelheidswinst. Een array met opgebouwde knooppunten werkt ook: list.append(...items) voegt ze toe, terwijl list.replaceChildren(...items) de huidige inhoud ermee vervangt.

Definieer herhaalde opmaak in een template

<template id="book-row">
  <li class="book"><span class="title"></span>
    (<span class="pages"></span> pages)</li>
</template>

De browser ontleedt deze opmaak zonder die weer te geven. De inhoud staat in een afzonderlijk DocumentFragment op template.content. Een zoekopdracht op documentniveau doorzoekt dat fragment niet. Selecteer de template, kloon de inhoud en zoek daarna binnen de kloon:

const template = document.querySelector("#book-row");
const clone = template.content.cloneNode(true);
clone.querySelector(".title").textContent = book.title;
clone.querySelector(".pages").textContent = book.pages;
const item = clone.firstElementChild;
list.append(clone);

De titel en het pagina-aantal worden vóór het invoegen ingevuld. item bewaart een referentie naar de nieuwe <li>. Na het toevoegen is clone leeg omdat de kinderen zijn verplaatst, maar item verwijst nog steeds naar het ingevoegde element.

Behoud de herbruikbare bron

Voeg elke keer een kopie toe. De aanroep list.append(template.content) verplaatst de bronknooppunten uit de template. Een latere zoekopdracht binnen template.content geeft dan null terug en de volgende poging om de ontbrekende titel in te vullen veroorzaakt een fout. De brontemplate moet beschikbaar blijven voor latere boeken.

Vul voor veel kopieën elk gekloond fragment, voeg die kopieën toe aan een verzamelfragment en voeg daarna de verzameling in. Een fragment kan de kinderen van een ander fragment ontvangen, net zoals een lijst dat kan.

Kies een leesbare opbouwmethode

createElement() is geschikt voor een kleine structuur of een structuur die sterk verschilt per item. Een template is geschikt voor grotere herhaalde opmaak die als HTML gemakkelijker te bewerken is. Voeg in beide gevallen externe waarden in als tekst. Een HTML-string is geschikt voor vertrouwde opmaak, maar interpolatie daarin leidt nog steeds tot het ontleden van HTML. Kies de opbouwmethode op basis van de structuur die je moet onderhouden en houd dezelfde volgorde aan: maken of klonen, vullen en invoegen.

Verzamel ingevulde kopieën voor één vervanging

Met de bovenstaande boektemplate en een bestaande array books:

const group = document.createDocumentFragment();
for (const book of books) {
  const copy = template.content.cloneNode(true);
  copy.querySelector(".title").textContent = book.title;
  copy.querySelector(".pages").textContent = book.pages;
  group.append(copy);
}
list.replaceChildren(group);

Elke ingevulde kopie verplaatst het bijbehorende item naar group. De laatste regel vervangt de inhoud van de lijst door die items en maakt group leeg. De oorspronkelijke template blijft daarbij ongemoeid, zodat de functie de opbouw later voor een andere array kan herhalen.

Gebruik gegevens als de enige leidende gegevensbron. Een renderfunctie leidt een weergave af van de huidige array. Roep de functie aan nadat je de array of een object daarin hebt gewijzigd.

Vervang de weergave bij elke renderactie

Stel dat tasks vier objecten bevat, waarvan er precies één voltooid is, en dat taak 2 bestaat en nog niet is voltooid. Een renderfunctie kan nieuwe items en een overzicht opbouwen:

function render() {
  const items = tasks.map(task => {
    const li = document.createElement("li");
    li.dataset.id = String(task.id);
    li.textContent = task.text;
    li.classList.toggle("done", task.done);
    return li;
  });
  list.replaceChildren(...items);
  const doneCount = tasks.filter(task => task.done).length;
  summary.textContent = `${doneCount} of ${tasks.length} done`;
}

Na tasks.push({ id: 5, text: "Book dentist", done: false }); render(); heeft de lijst vijf items en vermeldt het overzicht “1 of 5 done”. Als je tasks.find(task => task.id === 2).done = true; render(); instelt en uitvoert, verandert dit in “2 of 5 done”.

Het vervangen van kinderen is hier essentieel. Als de functie alleen alle items zou toevoegen, zou twee keer aanroepen de weergave verdubbelen. Alleen een DOM-item verwijderen is ook tijdelijk: als het object in de array blijft staan, brengt renderen het terug. Als tasks met let is gedeclareerd, verwijder je het uit de gegevens met tasks = tasks.filter(task => task.id !== id) en render je opnieuw.

Leid een weergave af zonder de bron te verliezen

Geef bij een renderfunctie die een weergavearray accepteert tasks.filter(task => !task.done) door om alleen onvoltooide taken weer te geven. Bewaar de volledige array voor latere weergaven en tellingen van de hele lijst. Geef overzichten een duidelijke betekenis: een aantal zichtbare taken verschilt van een aantal van alle taken.

sort() wijzigt de array waarop de methode wordt aangeroepen. Sorteer voor de weergave een kopie met [...tasks].sort(...) of gebruik tasks.toSorted(...) voor een gesorteerde kopie. Geef een vergelijkingsfunctie op: numerieke waarden hebben (a, b) => a - b nodig en voor titels kun je (a, b) => a.title.localeCompare(b.title) gebruiken. De standaardsoortering vergelijkt stringvormen, dus [100, 25, 3].sort() blijft in die volgorde; numeriek sorteren geeft [3, 25, 100].

Vergelijk id's en ontleed gegevens correct

Een weergegeven dataset.id is een string. Converteer die vóór een strikte vergelijking met numerieke id's, anders kan find() undefined teruggeven ook al bestaat het bedoelde object. JSON-gegevens zijn anders: JSON.parse() behoudt JSON-getallen en booleaanse waarden als die typen. Ontlede objecten kunnen door dezelfde renderfunctie worden verwerkt als objecten die rechtstreeks in code zijn geschreven.

Behoud zo nodig lokale toestand

Een volledige heropbouw maakt nieuwe elementen. Daarbij kunnen focus en tekst die in invoervelden binnen het opnieuw opgebouwde gebied is getypt verloren gaan. Werk bij een kleine toestandswijziging waarbij die objecten behouden moeten blijven eerst de gegevens bij en daarna het bestaande item, bijvoorbeeld met li.classList.toggle("done", task.done). De gegevens moeten de wijziging nog steeds vastleggen, zodat een latere volledige renderactie overeenkomt met de huidige weergave.

Geef de weergave en het overzicht afzonderlijke invoer

Een gefilterde weergave kan nog steeds een overzicht van alle taken tonen:

function renderOpenTasks() {
  const visible = tasks.filter(task => !task.done);
  const nodes = visible.map(task => {
    const li = document.createElement("li");
    li.textContent = task.text;
    return li;
  });
  if (visible.length === 0) {
    const empty = document.createElement("li");
    empty.textContent = "No open tasks";
    nodes.push(empty);
  }
  list.replaceChildren(...nodes);
  const done = tasks.filter(task => task.done).length;
  summary.textContent = `${done} of ${tasks.length} done`;
}

Een array waarin alles is voltooid, toont voor deze weergave het bericht voor een lege lijst, maar behoudt elk object voor het totaal. Tellen vanuit visible zou een andere vraag beantwoorden en zou kunnen melden dat er geen voltooide taken zijn, alleen omdat deze weergave ze uitsluit.