DOM CRUD-bewerkingen

Het Document Object Model (DOM) is de manier waarop browsers HTML weergeven. Het zet elk element, attribuut en tekstfragment om in een object. JavaScript gebruikt deze objecten om te veranderen wat je op een scherm ziet.

Wanneer je op een knop klikt en een pagina wordt bijgewerkt zonder te verversen, is JavaScript de DOM aan het aanpassen.

Je kunt CRUD-bewerkingen (Create, Read, Update, Delete) uitvoeren met deze methoden.

  1. Elementen benaderen (Read) Om iets te veranderen, moet je het eerst vinden. Gebruik deze methoden:
  • getElementById()
  • getElementsByClassName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
  1. Elementen maken (Create) Je kunt nieuwe HTML-elementen genereren met JavaScript.
  • createElement("tagName") maakt het element in het geheugen aan.
  • append() voegt inhoud toe aan het einde van een ouder-element.
  • appendChild() voegt een enkele node toe als het laatste kind-element.
  • prepend() voegt inhoud toe aan het begin van een ouder-element.
  • before() voegt een element in vóór een specifiek item.
  • after() voegt een element in na een specifiek item.
  • insertBefore() plaatst een element vóór een specifiek kind-element.

Let op: Een element blijft in het geheugen staan totdat je het aan de pagina toevoegt.

  1. Elementen bijwerken (Update) Je kunt bestaande inhoud wijzigen met deze eigenschappen:
  • innerText: Wijzigt alleen de zichtbare tekst.
  • textContent: Wijzigt alle tekst, inclusief verborgen tekst.
  • innerHTML: Wijzigt de inhoud en stelt je in staat om HTML-tags toe te voegen.
  1. Werken met attributen (Update) Attributen bieden extra informatie over elementen.
  • setAttribute(name, value): Stelt een attribuut in of vervangt het.
  • getAttribute(name): Haalt een attribuutwaarde op.
  • removeAttribute(name): Verwijdert een attribuut.
  • hasAttribute(name): Controleert of een attribuut bestaat.

Pro tip: Gebruik classList.add() om een class toe te voegen zonder de oude te verwijderen. setAttribute() vervangt de volledige waarde.

  1. Elementen verwijderen (Delete) Om een element van de pagina te verwijderen, gebruik je:
  • remove()

Samenvatting van een CRUD-flow:

  • Create: createElement()
  • Update: innerText = "New text"
  • Add: appendChild()
  • Delete: remove()

Door deze methoden onder de knie te krijgen, kun je interactieve applicaties bouwen zoals to-do-lijsten of rekenmachines. Dit is een essentiële vaardigheid voor front-end development.

Bron: https://dev.to/madhanraj/document-object-model-dom-crud-operations-9ka