Aan de slag met het bekijken en wijzigen van het DOM

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Bekijk de video en volg deze interactieve tutorials om de basisbeginselen te leren van het bekijken en wijzigen van het DOM van een pagina met Chrome DevTools.

In deze tutorial gaan we ervan uit dat je het verschil tussen het DOM en HTML kent. Ga naar de bijlage: HTML versus het DOM voor een opfrissing.

DOM-nodes bekijken

In de DOM-boomstructuur van het deelvenster Elementen voer je alle DOM-gerelateerde activiteiten uit in DevTools.

Een node inspecteren

Als je geïnteresseerd bent in een bepaalde DOM-node, is Inspecteren een snelle manier om DevTools te openen en die node te onderzoeken.

  1. Klik in de volgende lijst met de rechtermuisknop op Michelangelo. Selecteer Inspecteren in het menu.

    • Michelangelo
    • Raphael

    Het deelvenster Elementen van DevTools wordt geopend. <li>Michelangelo</li> is gemarkeerd in de DOM-boomstructuur.

    Het Michelangelo-knooppunt markeren

  2. Klik op Een element selecteren.

  3. Selecteer Tokyo in de volgende lijst.

    • Tokio
    • Beiroet

    <li>Tokyo</li> is gemarkeerd in de DOM-boomstructuur.

Een knooppunt inspecteren is ook de eerste stap om de stijlen en CSS van een knooppunt te bekijken en te wijzigen.

Navigeren in de DOM-boomstructuur met een toetsenbord

Nadat je een node in de DOM-boomstructuur hebt geselecteerd, kun je met je toetsenbord door de DOM-boomstructuur navigeren.

  1. Klik met de rechtermuisknop op Ringo in de volgende lijst en selecteer Inspecteren. <li>Ringo</li> is geselecteerd in de DOM-boomstructuur.

    • George
    • Ringo
    • Paul

    • Johan

      De Ringo-node inspecteren

  2. Druk 2 keer op de pijl-omhoog. <ul> is geselecteerd.

    De ul-node inspecteren

  3. Druk op de pijl-links. De lijst <ul> wordt samengevouwen.

  4. Druk nogmaals op de pijl-links. De bovenliggende node van de <ul>-node is geselecteerd. In dit geval is het de <li>-node met de instructies voor stap 1.

  5. Druk 3 keer op de pijl-omlaag om de lijst <ul> die je net hebt samengevouwen opnieuw te selecteren. Het ziet er zo uit: <ul>...</ul>

  6. Druk op de pijl-rechts. De lijst wordt uitgevouwen.

In beeld scrollen

Als je de DOM-boomstructuur bekijkt, bevind je je soms in een DOM-node die niet in het kijkvenster staat. Stel dat je naar de onderkant van de pagina bent gescrold en dat je geïnteresseerd bent in de <h1>-node bovenaan de pagina. Met Scrollen naar weergave kun je de viewport snel verplaatsen, zodat je de node kunt zien.

  1. Klik in de volgende lijst met de rechtermuisknop op Magritte en selecteer Inspecteren.

    • Magritte
    • Soutine

  2. Scroll naar het bijlagegedeelte Scrollen tot in beeld voor aanvullende instructies.

Als je klaar bent, ga je terug naar dit gedeelte.

Linialen tonen

Met linialen in je viewport kun je de breedte en hoogte van een element meten door de muisaanwijzer erop te plaatsen in het deelvenster Elementen.

Zet de linialen op een van de volgende 2 manieren aan:

  • Druk op Control+Shift+P of Command+Shift+P (macOS) om het opdrachtmenu te openen, typ Show rulers on hover en druk op Enter.
  • Check de . Instellingen > Voorkeuren > Elementen > Linialen tonen als de cursor erop staat.

De maateenheid van de linialen is pixels.

Je kunt de DOM-boomstructuur doorzoeken op tekenreeks, css-kiezer of XPath-kiezer.

  1. Plaats de cursor in het deelvenster Elementen.
  2. Druk op Ctrl+F of Command+F (macOS). De zoekbalk wordt onderaan de DOM-boomstructuur geopend.

  3. Typ The Moon is a Harsh Mistress. De laatste zin is gemarkeerd in de DOM-boomstructuur.

    De zoekopdracht wordt gemarkeerd in de zoekbalk.

De zoekbalk ondersteunt ook css- en XPath-kiezers.

In het deelvenster Elementen wordt het eerste overeenkomende resultaat in de DOM-boomstructuur geselecteerd en in het kijkvenster getoond. Dit gebeurt standaard terwijl je typt. Als je altijd met lange zoekopdrachten werkt, kun je instellen dat DevTools alleen zoekt als je op Enter drukt.

Als je onnodige sprongen tussen nodes wilt voorkomen, vink je het selectievakje Instellingen > Voorkeuren > Algemeen > Zoeken terwijl je typt uit.

Het selectievakje Zoeken terwijl je typt is uitgevinkt in Instellingen.

Het DOM bewerken

Je kunt het DOM dynamisch bewerken en zien hoe die wijzigingen de pagina beïnvloeden.

Content bewerken

Als je de content van een node wilt bewerken, dubbelklik je op de content in de DOM-boomstructuur.

  1. Klik in de volgende lijst met de rechtermuisknop op Michelle en selecteer Inspecteren.

    • Frituren
    • Michelle

  2. Dubbelklik in de DOM-boomstructuur op Michelle. Dubbelklik dus op de tekst tussen <li> en </li>. De tekst wordt blauw gemarkeerd om aan te geven dat deze is geselecteerd.

    De tekst bewerken

  3. Verwijder Michelle, typ Leela en druk op Enter om de wijziging te bevestigen. De tekst verandert van Michelle in Leela.

Kenmerken bewerken

Als u kenmerken wilt bewerken, dubbelklikt u op de naam of waarde van het kenmerk. Volg deze instructies om te leren hoe je kenmerken aan een node toevoegt.

  1. Klik in de volgende lijst met de rechtermuisknop op Howard en selecteer Inspecteren.

    • Howard
    • Vince

  2. Vouw <ul> uit en dubbelklik op <li> om te bewerken. De tekst wordt gemarkeerd om aan te geven dat de node is geselecteerd.

    Als je op het knooppunt klikt, wordt het gemarkeerd om aan te geven dat het is geselecteerd.

  3. Druk op de pijltoets Rechts, voeg een spatie toe, typ style="background-color:gold" en druk op Enter. De achtergrondkleur van de knoop verandert in goud.

    Een stijlkenmerk toevoegen aan de node

Nodetype bewerken

Als je het type van een node wilt bewerken, dubbelklik je op het type en typ je het nieuwe type.

  1. Klik in de volgende lijst met de rechtermuisknop op Hank en selecteer Inspecteren.

    • Decaan
    • Hank
    • Thaddeus
    • Brock

  2. Dubbelklik op <li>. De tekst li is gemarkeerd.

  3. Verwijder li, typ button en druk op Enter. De <li>-node verandert in een <button>-node.

    Het knooppunttype wijzigen in knop

Bewerken als HTML

Als je nodes wilt bewerken als HTML met syntaxismarkering en automatisch aanvullen, selecteer je Bewerken als HTML in het dropdownmenu van de node.

  1. Klik met de rechtermuisknop op Leonard hieronder en selecteer Inspecteren.

    • Penny
    • Howard
    • Rajesh
    • Leonard

  2. Klik in het deelvenster Elementen met de rechtermuisknop op de huidige node en selecteer Bewerken als HTML in het dropdownmenu.

    Het dropdownmenu van een knooppunt.

  3. Druk op Enter om een nieuwe regel te beginnen en te typen <l. DevTool markeert HTML-syntaxis en stelt tags voor om automatisch aan te vullen.

    Automatisch aanvullen van HTML-tags.

  4. Selecteer het element li in het menu voor automatisch aanvullen en typ >. DevTools voegt automatisch de afsluitende tag </li> toe na de cursor.

    DevTools sluit de tag automatisch.

  5. Typ Sheldon in de tag en druk op Ctrl of Command + Enter om de wijzigingen toe te passen.

Een node dupliceren

U kunt een element dupliceren met de optie Element dupliceren die u vindt door met de rechtermuisknop te klikken.

  1. Klik met de rechtermuisknop op Nana in de volgende lijst en selecteer Inspecteren.

    • Bonfire of the Vanities
    • Nana
    • Orlando
    • Witte ruis

  2. Klik in het deelvenster Elementen met de rechtermuisknop op <li>Nana</li> en selecteer Element dupliceren in het dropdownmenu.

    De optie Element dupliceren is gemarkeerd in het dropdownmenu.

  3. Terug naar de pagina. Het lijstitem is gedupliceerd.

Je kunt ook de sneltoetsen Shift + Alt + pijl-omlaag (Windows en Linux) en Shift + Option + pijl-omlaag (macOS) gebruiken.

Een screenshot van een node maken

Je kunt een screenshot maken van elke afzonderlijke node in de DOM-boomstructuur.

  1. Klik met de rechtermuisknop op een afbeelding op deze pagina en selecteer Inspecteren.

  2. Klik in het deelvenster Elementen met de rechtermuisknop op de afbeeldings-URL en selecteer Screenshot van node maken in het dropdownmenu.

    Er wordt een screenshot van een node gemaakt.

  3. Het screenshot wordt opgeslagen in je downloads (Windows en macOS).

Ga naar 4 manieren om screenshots te maken met DevTools voor meer informatie.

DOM-nodes opnieuw ordenen

Sleep knooppunten om de volgorde te wijzigen.

  1. Klik in de volgende lijst met de rechtermuisknop op Elvis Presley en selecteer Inspecteren. Het is het laatste item in de lijst.

    • Stevie Wonder
    • Tom Waits
    • Chris Thile
    • Elvis Presley

  2. Sleep <li>Elvis Presley</li> in de DOM-boomstructuur naar de bovenkant van de lijst.

Status van afdwingen

Je kunt nodes dwingen om in statussen te blijven zoals :active, :hover, :focus, :visited en :focus-within.

  1. Plaats de cursor op het lijstitem The Lord of the Flies. De achtergrondkleur wordt oranje.

    • The Lord of the Flies
    • Misdaad en straf
    • Moby Dick

  2. Klik met de rechtermuisknop op het lijstitem The Lord of the Flies en selecteer Inspecteren.

  3. Klik met de rechtermuisknop op <li class="demo--hover">The Lord of the Flies</li> en selecteer Status forceren > :hover. Lees de bijlage over ontbrekende opties als u deze optie niet ziet.

    De achtergrondkleur blijft oranje, ook al plaats je de muisaanwijzer niet op de node.

Een node verbergen

Druk op H om een knooppunt te verbergen.

  1. Klik in de volgende lijst met de rechtermuisknop op The Stars My Destination en selecteer Inspecteren.

    • De graaf van Monte-Cristo
    • The Stars My Destination

  2. Druk op de H-toets. De node is verborgen. Je kunt ook met de rechtermuisknop op de node klikken en de optie Element verbergen gebruiken.

    Hoe de node eruitziet in de DOM-boomstructuur nadat deze is verborgen

  3. Druk nog een keer op de toets H. De node wordt weer getoond.

Een node verwijderen

Druk op Verwijderen om een knooppunt te verwijderen.

  1. Klik in de volgende lijst met de rechtermuisknop op Foundation en selecteer Inspecteren.

    • The Illustrated Man
    • Through the Looking-Glass
    • Fundering

  2. Druk op de toets Delete. De node is verwijderd. Je kunt ook met de rechtermuisknop op de node klikken en de optie Element verwijderen gebruiken.

  3. Druk op Ctrl+Z of Command+Z (macOS). De laatste actie wordt ongedaan gemaakt en de node verschijnt weer.

Toegangsknooppunten in de console

DevTools biedt een paar sneltoetsen om toegang te krijgen tot DOM-nodes vanuit de Console of om JavaScript-verwijzingen naar deze nodes te krijgen.

Verwijs naar de momenteel geselecteerde node met $0

Als je een knooppunt inspecteert (inclusief pseudoelementen zoals ::before of ::after), betekent de tekst == $0 naast het knooppunt dat je naar dit knooppunt kunt verwijzen in de Console met de variabele $0.

  1. Klik met de rechtermuisknop op het lijstitem The Left Hand of Darkness en selecteer Inspecteren.

    • The Left Hand of Darkness
    • Dune

  2. Druk op de toets Escape om de consolelade te openen. Je moet misschien Console selecteren om deze te openen.

  3. Typ $0 en druk op de Enter-toets. Het resultaat van de expressie is dat $0 evalueert tot <li>The Left Hand of Darkness</li>.

    Het resultaat van de eerste $0-expressie in de Console.

  4. Plaats de cursor op het resultaat. De node wordt gemarkeerd in het kijkvenster.

  5. Klik op <li>Dune</li> in de DOM-boomstructuur, typ opnieuw $0 in de console en druk nog een keer op Enter. Nu leidt $0 tot <li>Dune</li>.

    Het resultaat van de 2e $0-expressie in de Console.

Opslaan als globale variabele

Als je vaak naar een knooppunt moet verwijzen, sla je het op als globale variabele.

  1. Klik in de volgende lijst met de rechtermuisknop op The Big Sleep en selecteer Inspecteren.

    • The Big Sleep
    • The Long Goodbye

  2. Klik met de rechtermuisknop op <li>The Big Sleep</li> in de DOM-boomstructuur en selecteer Opslaan als globale variabele. Als je deze optie niet kunt vinden, lees je meer informatie over ontbrekende opties.

  3. Typ temp1 in de console en druk op Enter. Het resultaat van de expressie toont aan dat de variabele de node evalueert. Klik op de node om het lijstitem uit te vouwen.

    Het resultaat van de expressie temp1.

JS-pad kopiëren

Kopieer het JavaScript-pad naar een knooppunt om ernaar te verwijzen in een geautomatiseerde test.

  1. Klik in de volgende lijst met de rechtermuisknop op De gebroeders Karamazov en selecteer Inspecteren.

    • De gebroeders Karamazov
    • Misdaad en straf

  2. Klik met de rechtermuisknop op <li>The Brothers Karamazov</li> in de DOM-boomstructuur en selecteer Kopiëren > JS-pad kopiëren. Er is een document.querySelector()-expressie die naar de node verwijst, naar het klembord gekopieerd.

  3. Druk op Ctrl+V of Command+V (macOS) om de expressie in de Console te plakken.

  4. Druk op Enter om de expressie te evalueren.

    Het resultaat van de expressie JS-pad kopiëren

Onderbreken bij DOM-wijzigingen

Met DevTools kun je het JavaScript van een pagina onderbreken als het JavaScript het DOM wijzigt. Meer informatie over breakpoints voor DOM-wijzigingen

Volgende stappen

Dat omvat de meeste DOM-gerelateerde functies in DevTools. Je kunt de rest ontdekken door met de rechtermuisknop op nodes in de DOM-boomstructuur te klikken en te experimenteren met de opties die niet in deze tutorial worden behandeld.

Lees verder:

Neem deel aan de DevTools-community om contact op te nemen met het DevTools-team of hulp te krijgen van andere ontwikkelaars.

Bijlage

Meer informatie over specifieke onderwerpen.

HTML versus het DOM

In dit gedeelte wordt kort het verschil tussen HTML en het DOM uitgelegd.

Als je een webbrowser gebruikt om een pagina zoals https://example.com op te vragen, retourneert de server een HTML-document:

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

De browser parseert de HTML en maakt een boomstructuur van objecten:

html
  head
    title
  body
    h1
    p
    script

Deze structuur van objecten of knooppunten vertegenwoordigt de content van de pagina. Dit wordt het document object model genoemd, of kortweg het DOM. Op dit moment zijn de objecten hetzelfde in zowel het DOM als de HTML.

Stel dat het script.js-bestand onderaan de HTML de volgende functies bevat:

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

Dat script verwijdert de h1-node en voegt een andere p-node toe aan het DOM. Het DOM ziet er nu zo uit:

html
  head
    title
  body
    p
    script
    p

De HTML van de pagina is nu anders dan het DOM.

HTML vertegenwoordigt de initiële paginacontent en het DOM vertegenwoordigt de actieve, huidige paginacontent. Als JavaScript knooppunten toevoegt, verwijdert of bewerkt, wijkt het DOM af van de HTML.

Ga naar de Inleiding tot het DOM van MDN voor meer informatie.

In beeld scrollen

Dit is een vervolg op het gedeelte In beeld scrollen. Volg de instructies om het gedeelte af te ronden.

  1. Het <li>Magritte</li>-knooppunt moet nog steeds zijn geselecteerd in je DOM-boomstructuur. Als dit niet het geval is, ga je terug naar Scrollen tot element zichtbaar is en begin je opnieuw.

  2. Klik met de rechtermuisknop op de node <li>Magritte</li> en selecteer Scrollen naar weergave. Het kijkvenster scrollt weer omhoog, zodat u de Magritte-node kunt zien. Als Scrollen naar weergave ontbreekt, lees je meer informatie over ontbrekende opties.

Ontbrekende opties

In veel instructies in deze tutorial wordt je gevraagd met de rechtermuisknop op een node in de DOM-boomstructuur te klikken en een optie te selecteren in het contextmenu dat verschijnt. Als je de aangegeven optie niet ziet in het contextmenu, klik je met de rechtermuisknop buiten de tekst van de node.

Waar je moet klikken als je niet alle opties ziet