DOM Manipulation

"DOM Manipulation," refers to the methods and interfaces provided by the Document Object Model (DOM) that allow you to interact with and modify the structure and content of webpages. The DOM represents the document as a hierarchical tree of nodes, where each node represents a part of the document (such as an element, attribute, or text). JavaScript allows you to manipulate the DOM, enabling dynamic changes to the content, structure, and style of webpages. Here are key concepts and operations involved in DOM manipulation:

1. Accessing Elements

To manipulate the content, you first need to access the elements. Common methods to access DOM elements include:

document.getElementById(id): Selects a single element by its ID.
document.getElementsByTagName(name): Returns a collection of elements with the given tag name.
document.getElementsByClassName(name): Returns a collection of elements that have the given class name.
document.querySelector(selector): Returns the first element that matches a specified CSS selector.
document.querySelectorAll(selector): Returns a list of all elements that match a specified CSS selector.

2. Changing Element Properties

Once you have a reference to an element, you can modify its properties. This includes changing the element's inner HTML, text content, attributes, and style. For example:

element.innerHTML: Gets or sets the HTML or XML markup contained within the element.
element.textContent: Sets or returns the textual content of an element and its descendants.
element.setAttribute(name, value): Adds a specified attribute to an element, or updates its value if it already exists.
element.style.property: Changes the style of an element, where property is a CSS property (in camelCase, e.g., backgroundColor).

3. Creating and Removing Elements

JavaScript allows you to create new elements and insert them into the DOM or remove existing elements:

document.createElement(tagName): Creates a new element with the given tag name.
parentNode.appendChild(childNode): Appends a node as the last child of a parent node.
parentNode.insertBefore(newNode, referenceNode): Inserts a new node before the reference node as a child of a specified parent node.
parentNode.removeChild(child): Removes a child node from the DOM.
element.remove(): Removes the element from the DOM.

4. Event Handling

Adding event listeners to elements enables you to execute code in response to user actions, such as clicks, keyboard input, or mouse movements:

element.addEventListener(event, function, useCapture): Attaches an event handler to an element. Common events include click, mouseover, mouseout, keydown, keyup, etc.

5. Traversal and Modification

The DOM provides methods and properties to traverse and modify nodes:

element.childNodes: Returns a live NodeList of child nodes of an element.
element.parentElement: Returns the parent element of the specified element.
element.nextSibling: Returns the next sibling in the tree.
element.previousSibling: Returns the previous sibling in the tree.

Nederlands

"DOM Manipulatie" verwijst naar de methoden en interfaces die worden geboden door het Document Object Model (DOM) waarmee je kunt interageren met en de structuur en inhoud van webpagina's kunt wijzigen. Het DOM vertegenwoordigt het document als een hiërarchische boom van knooppunten, waarbij elk knooppunt een deel van het document vertegenwoordigt (zoals een element, attribuut of tekst). JavaScript stelt je in staat om het DOM te manipuleren, wat dynamische veranderingen aan de inhoud, structuur en stijl van webpagina's mogelijk maakt. Hier zijn enkele kernconcepten en -bewerkingen die betrokken zijn bij DOM-manipulatie:

Toegang krijgen tot Elementen

Om de inhoud te manipuleren, moet je eerst toegang krijgen tot de elementen. Veelgebruikte methoden om toegang te krijgen tot DOM-elementen zijn:

document.getElementById(id): Selecteert een enkel element op basis van zijn ID.
document.getElementsByTagName(name): Geeft een verzameling van elementen terug met de gegeven tag-naam.
document.getElementsByClassName(name): Geeft een verzameling van elementen terug die de gegeven klassenaam hebben.
document.querySelector(selector): Geeft het eerste element terug dat overeenkomt met een gespecificeerde CSS-selector.
document.querySelectorAll(selector): Geeft een lijst terug van alle elementen die overeenkomen met een gespecificeerde CSS-selector.

Wijzigen van Elementeigenschappen

Zodra je een referentie naar een element hebt, kun je de eigenschappen ervan wijzigen. Dit omvat het wijzigen van de innerlijke HTML, tekstinhoud, attributen en stijl van het element. Bijvoorbeeld:

element.innerHTML: Haalt op of stelt de HTML- of XML-markering in die binnen het element is opgenomen.
element.textContent: Stelt de tekstuele inhoud van een element en zijn nakomelingen in of retourneert deze.
element.setAttribute(name, value): Voegt een gespecificeerd attribuut toe aan een element, of werkt de waarde ervan bij als het al bestaat.
element.style.property: Wijzigt de stijl van een element, waarbij property een CSS-eigenschap is (in camelCase, bijvoorbeeld backgroundColor).

Creëren en Verwijderen van Elementen

JavaScript stelt je in staat om nieuwe elementen te creëren en deze in het DOM in te voegen of bestaande elementen te verwijderen:

document.createElement(tagName): Creëert een nieuw element met de gegeven tag-naam.
parentNode.appendChild(childNode): Voegt een knooppunt toe als het laatste kind van een ouder knooppunt.
parentNode.insertBefore(newNode, referenceNode): Voegt een nieuw knooppunt in vóór het referentieknooppunt als een kind van een gespecificeerd ouderknooppunt.
parentNode.removeChild(child): Verwijdert een kindknooppunt uit het DOM.
element.remove(): Verwijdert het element uit het DOM.

Event Handling

Het toevoegen van event listeners aan elementen stelt je in staat om code uit te voeren als reactie op gebruikersacties, zoals klikken, toetsenbordinvoer of muisbewegingen:

element.addEventListener(event, function, useCapture): Voegt een event handler toe aan een element. Veelvoorkomende events zijn click, mouseover, mouseout, keydown, keyup, enz.

Doorlopen en Wijzigen

Het DOM biedt methoden en eigenschappen om knooppunten te doorlopen en te wijzigen:

element.childNodes: Geeft een live NodeList van kindknooppunten van een element terug.
element.parentElement: Geeft het ouder-element van het gespecificeerde element terug.
element.nextSibling: Geeft de volgende sibling in de boom terug.
element.previousSibling: Geeft de vorige sibling in de boom terug.