# Manipuleren van de DOM

De DOM kan op verschillende maniere gemanipuleerd worden:

toevoegen van HTML elementen
verwijderen van HTML elementen
de tekst binnen een HTML element aanpassen
de HTML inhoud binnen een HTML element aanpassen
toevoegen van een attribuut aan een HTML element
verwijderen van een attribuut uit een HTML element
wijzigen van een specifieke stijl van een element
class-waarden toevoegen of verwijderen
…

# Creatie van elementen

HTML elementen kunnen aangemaakt worden via de functie document.createElement(name). In de name parameter specificeren we het element type bijv.: p, div, article … De gecreëerde elementen kunnen we vervolgens toevoegen aan een bestaand element via de functies element.appendChild(child) of element.prependChild(child).

const concertElement = document.createElement('article');
const lineupElement = document.getElementById('lineup');
lineupElement.appendChild(concertElement);

1
2
3

Elementen kunnen ook toegevoegd worden door de innerHTML eigenschap van een HTML element aan te spreken. Deze werkwijze is handig wanneer we de toegevoegde elementen niet direct gaan aanspreken via JavaScript. Deze handeling is wel veeleisender dan de voorgaande methode, maar vereist minder regels code.

const lineupElement = document.getElementById('lineup');
lineupElement.innertHTML += `
    <article class="concert">
        <h1>Concert 1</h1>
    </article>
`

1
2
3
4
5
6

Opmerking

Er zijn toch verschillende redenen om innerHTML te vermijden: DOM Manipulation and the Dangers of ‘innerHTML’ (opens new window). Let dus goed op als je dit gebruikt.

Pure text, zonder tags, kunnen ook aangemaakt worden, maar worden vrijwel nooit toegepast. Om een knoop van tekst aan te maken implementeren we document.createTextNode() (opens new window). Deze aangemaakte “text node” kunnen we vervolgens toevoegen aan het document of een bestaand element via de appendChild(node) functie. We kunnen ook pure tekst toevoegen aan een element via de functie element.innerText(text) (opens new window).

# Verwijderen van elementen

Verwijderen van elementen doen we met de remove()-methode. We kunnen dit doen op volgende manier:

const element = document.getElementById("demo");
element.remove();

1
2

# Veranderen van tekst binnen HTML element

# textContent

<html>
<body>
  <h1>Heading 1</h1>
</body>
<script>
  // change the text content in the heading
  document.querySelector("h1").textContent = "H1";
</script>
</html>

1
2
3
4
5
6
7
8
9

Deze eigenschap geeft alleen de tekst binnen een element. Alle HTML in het element wordt gestript voordat de tekst wordt terug gegeven.

# innerHTML

innerHTML gaat zowel de tekst als de HTML-code ingeven, hierdoor kunnen we dus extra elementen aanmaken.

<html>
<body>
  <p>
    In this paragraph we have some <strong>bolded text</strong>,
    some <em>italicized text</em> and a <a href="#">link</a>.
  </p>

  <p></p>
</body>
<script>
  const p1 = document.querySelectorAll("p")[0]; // top p
  const p2 = document.querySelectorAll("p")[1]; // bottom p

  // place the first paragraph's text
  // into the second one as demonstration
  p2.innerHTML = p1.innerHTML;
</script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# innerText

innerText werkt op dezelfde manier als textContent maar gaat geen hidden elementen weergeven.

<html>
<body>
  <p>
    This paragraph has a <span style="display:none">hidden span element</span>
    and a <span>visible span element</span>
  </p>
  <p></p>
  <p></p>
</body>
<script>
  const p = document.querySelectorAll("p");

  // textContent will display the hidden element
  p[1].textContent = "textContent: " + p[0].textContent;
  // innerText will not
  p[2].innerText = "innerText: " + p[0].innerText;
</script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Toevoegen van een attribuut aan een HTML element

# setAttribute

Bij deze methode selecteren we eerst een element (hier met getElementByID, maar elke andere manier is ook goed), hierop gaan we dan de methode setAttribute toepassen.

let elementVar = document.getElementById("element_id");
elementVar.setAttribute("attribute", "value");

1
2

# attribute met dotnotatie

We kunnen hetzelfde bekomen door gewoon het attribuut met de dotnotatie aan te spreken.

document.getElementById("element_id").attribute = attribute_value;

Twee voorbeelden hiervan, waarbij de style en de innerHTML aangepast worden:

document.getElementById("result").style = "color:green";
document.getElementById("result").innerHTML = output;

1
2

# Verwijderen van een attribuut uit een HTML element

element.removeAttribute(name);

Als het element niet bestaat zal deze methode geen error geven. De methode geeft een waarde undefined terug.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>removeAttribute() Demo</title>
</head>
<body>
    <a href="https://www.pgm.gent" 
       target="_blank" 
       id="js">PGM Gent</a>

    <script>
        let link = document.querySelector('#js');
        if (link) {
            link.removeAttribute('target');
        }
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Wijzigen van een specifieke stijl van een element

Om een element van stijl aan te passen kunnen we dit op verschillende manieren doen, als eerste manier kunnen we de stijl aanpassen door het attribuut aan te spreken. In het voorbeeld vragen we een element op en passen we de tekstkleur aannaar groen.

const elementToChange = document.getElementById('elementToChange');
 // Inline style
elementToChange.style.color = "green";

1
2
3

# ClassList aanpassen

In plaats van enkel maar een specifiek element aan te passen kunnen we dit ook doen met klasses uit CSS.

De classList eigenschap: De classList is een alleen-lezen eigenschap die de CSS-class namen van een element teruggeeft als een DOMTokenList object.

document.getElementById("id").classList;

U kunt de onderstaande methoden gebruiken om respectievelijk klassen toe te voegen, klassen te verwijderen, en te wisselen tussen verschillende klassen.

De methode add(): Deze voegt een of meer klassen toe.
De methode remove(): Verwijdert een of meer klassen.
De methode toggle(): Als de klasse niet bestaat voegt het deze toe en geeft true terug. Het verwijdert de klasse en retourneert false.

# className

We kunnen ook de klasse zelf aanspreken en veranderen, hierbij gaan we gewoon de huidige klasse aanpassen naar een klasse die wij willen.

document.getElementById("id").className = class;

Selecteren Gebeurtenissen