Ga aan de slag met het bekijken en wijzigen van de DOM

Kayce Basques

Sofia Emelianova

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

Deze tutorial gaat ervan uit dat je het verschil kent tussen DOM en HTML. Zie Bijlage: HTML versus DOM voor een uitleg.

DOM-knooppunten bekijken

In het DOM-paneel ' Elementenboom' voert u alle DOM-gerelateerde activiteiten in DevTools uit.

Een knooppunt inspecteren

Wanneer u geïnteresseerd bent in een specifiek DOM-knooppunt, kunt u met Inspect snel DevTools openen en dat knooppunt onderzoeken.

1. Klik met de rechtermuisknop op Michelangelo hieronder en selecteer Inspecteren .
   • Michelangelo
   • Rafaël Het Elementen- paneel van DevTools wordt geopend. <li>Michelangelo</li> is gemarkeerd in de DOM-boom .
2. Klik op het Inspectie- pictogram in de linkerbovenhoek van DevTools.

3. Klik op de onderstaande tekst over Tokio .

   • Tokio

   • Beiroet

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

Het inspecteren van een knooppunt is ook de eerste stap naar het bekijken en wijzigen van de stijlen van een knooppunt. Zie Aan de slag met het bekijken en wijzigen van CSS .

Navigeer door de DOM-boom met een toetsenbord

Nadat u een knooppunt in de DOM-boom hebt geselecteerd, kunt u met het toetsenbord door de DOM-boom navigeren.

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

   • George
   • Ringo
   • Paulus

   • John

     

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

   

3. Druk op de pijl naar links . De <ul> -lijst klapt in.

4. Druk nogmaals op de linkerpijltoets . Het bovenliggende knooppunt van het <ul> -knooppunt is geselecteerd. In dit geval is dat het <li> -knooppunt met de instructies voor stap 1.

5. Druk drie keer op de pijl- omlaag om de <ul> -lijst die u zojuist hebt samengevouwen, opnieuw te selecteren. Het zou er zo uit moeten zien: <ul>...</ul>

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

Scroll naar weergave

Wanneer u de DOM-structuur bekijkt, merkt u soms dat u geïnteresseerd bent in een DOM-knooppunt dat momenteel niet in de viewport staat. Stel bijvoorbeeld dat u naar de onderkant van de pagina bent gescrold en u geïnteresseerd bent in het <h1> -knooppunt bovenaan de pagina. Door in beeld te scrollen kunt u de viewport snel verplaatsen zodat u het knooppunt kunt zien.

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

   • Magritte
   • Soutine

2. Ga naar de sectie Bijlage: Scroll naar weergave onderaan deze pagina. De instructies gaan daar verder.

Nadat u de instructies onderaan de pagina hebt voltooid, springt u hier weer naartoe.

Linialen weergeven

Met linialen boven en links van uw viewport kunt u de breedte en hoogte van een element meten wanneer u eroverheen beweegt in het deelvenster Elementen .

U kunt de linialen op twee manieren inschakelen:

• Druk op Control + Shift + P of Command + Shift + P (Mac) om het Command-menu te openen, typ Show rulers on hover en druk op Enter .
• Controleer de instellingen Instellingen > Voorkeuren > Elementen > Linialen weergeven bij zweven .

De maateenheid van de linialen is pixels.

Zoeken naar knooppunten

U kunt de DOM-boom doorzoeken op tekenreeks, CSS-selector of XPath-selector.

1. Plaats uw cursor op het Elementenpaneel .
2. Druk op Control + F of Command + F (Mac). De zoekbalk wordt onderaan de DOM-boom geopend.

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

   

Zoals hierboven vermeld, ondersteunt de zoekbalk ook CSS- en XPath-selectors.

Het Elementenpaneel selecteert het eerste overeenkomende resultaat in de DOM-structuur en rolt dit in de viewport. Standaard gebeurt dit terwijl u typt. Als u altijd met lange zoekopdrachten werkt, kunt u DevTools de zoekopdracht alleen laten uitvoeren wanneer u op Enter drukt.

Om onnodige sprongen tussen knooppunten te voorkomen, schakelt u het selectievakje Instellingen > Voorkeuren > Globaal > Zoeken terwijl u typt uit .

Bewerk de DOM

U kunt de DOM direct bewerken en zien hoe de wijzigingen de pagina beïnvloeden.

Inhoud bewerken

Om de inhoud van een knooppunt te bewerken, dubbelklikt u op de inhoud in de DOM-boom.

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

   • Bakken
   • Michelle

2. Dubbelklik in de DOM-structuur Michelle . Met andere woorden: dubbelklik op de tekst tussen <li> en </li> . De tekst wordt blauw gemarkeerd om aan te geven dat deze geselecteerd is.

   

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

Attributen bewerken

Om attributen te bewerken, dubbelklikt u op de attribuutnaam of -waarde. Volg de onderstaande instructies om te leren hoe u attributen aan een knooppunt toevoegt.

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

   • Howard
   • Vince

2. Dubbelklik op <li> . De tekst wordt gemarkeerd om aan te geven dat het knooppunt is geselecteerd.

   

3. Druk op de pijl naar rechts , voeg een spatie toe, typ style="background-color:gold" en druk op Enter . De achtergrondkleur van het knooppunt verandert in goud.

   

U kunt ook de optie Kenmerk bewerken gebruiken met de rechtermuisknop.

Knooppunttype bewerken

Als u het type van een knooppunt wilt bewerken, dubbelklikt u op het type en typt u vervolgens het nieuwe type.

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

   • Decaan
   • Streng
   • Thaddeus
   • Brock

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

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

   

Bewerken als HTML

Als u knooppunten als HTML wilt bewerken met syntaxisaccentuering en automatisch aanvullen, selecteert u Bewerken als HTML in het vervolgkeuzemenu van het knooppunt.

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

   • Cent
   • Howard
   • Rajesh
   • Leonard

2. Klik in het paneel Elementen met de rechtermuisknop op het huidige knooppunt en selecteer Bewerken als HTML in het vervolgkeuzemenu.

   

3. Druk op Enter om een ​​nieuwe regel te beginnen en begin met het typen <l . DevTool markeert de HTML-syntaxis en vult de tags automatisch voor u aan.

   

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

   

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

   

Een knooppunt dupliceren

U kunt een element dupliceren met de rechtermuisknopoptie Element dupliceren.

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

   • Vreugdevuur der ijdelheden
   • Nana
   • Orlando
   • Witte ruis

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

   

3. Ga terug naar de pagina. Het lijstitem is direct gedupliceerd.

U kunt ook de sneltoetsen gebruiken: Shift + Alt + pijl-omlaag (Windows en Linux) en Shift + Option + pijl-omlaag (MacOS).

Maak een screenshot van een knooppunt

U kunt een screenshot maken van elk afzonderlijk knooppunt in de DOM-boom met behulp van Capture node screenshot .

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 URL van de afbeelding en selecteer 'Screenshot van knooppunt vastleggen' in het vervolgkeuzemenu.

   

3. De schermafbeelding wordt opgeslagen in uw downloads.

   

Zie 4 manieren om screenshots te maken met DevTools voor meer manieren om screenshots te maken met DevTools .

DOM-knooppunten opnieuw ordenen

Versleep knooppunten om de volgorde ervan te wijzigen.

1. Klik met de rechtermuisknop op Elvis Presley hieronder en selecteer 'Inspecteren' . Merk op dat dit het laatste item in de lijst is.

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

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

   

Force-status

U kunt knooppunten dwingen om in statussen als :active , :hover , :focus , :visited en :focus-within te blijven.

1. Beweeg je muis over The Lord of the Flies hieronder. De achtergrondkleur wordt oranje.

   • De Heer der Vliegen
   • Misdaad en straf
   • Moby Dick

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

3. Klik met de rechtermuisknop op <li class="demo--hover">The Lord of the Flies</li> en selecteer Force State > :hover . Zie Bijlage: Ontbrekende opties als u deze optie niet ziet. De achtergrondkleur blijft oranje, ook al beweegt u de muis niet over het knooppunt.

Een knooppunt verbergen

Druk op H om een ​​knooppunt te verbergen.

1. Klik met de rechtermuisknop op The Stars My Destination hieronder en selecteer Inspecteren .

   • De graaf van Monte Cristo
   • De sterren mijn bestemming

2. Druk op de H- toets. Het knooppunt is verborgen. U kunt ook met de rechtermuisknop op het knooppunt klikken en de optie Element verbergen gebruiken.

   

3. Druk nogmaals op de H- toets. Het knooppunt wordt opnieuw weergegeven.

Een knooppunt verwijderen

Druk op Delete om een ​​knooppunt te verwijderen.

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

   • De geïllustreerde man
   • Door de spiegel
   • Fundering

2. Druk op de Delete- toets. Het knooppunt wordt verwijderd. U kunt ook met de rechtermuisknop op het knooppunt klikken en de optie Element verwijderen gebruiken.

3. Druk op Control + Z of Command + Z (Mac). De laatste actie wordt ongedaan gemaakt en het knooppunt verschijnt opnieuw.

Toegangsknooppunten in de console

DevTools biedt een aantal snelkoppelingen waarmee u vanuit de console toegang krijgt tot DOM-knooppunten of JavaScript-verwijzingen ernaar kunt ophalen.

Verwijs naar het momenteel geselecteerde knooppunt met $0

Wanneer u een knooppunt inspecteert, betekent de tekst == $0 naast het knooppunt dat u naar dit knooppunt kunt verwijzen in de console met de variabele $0 .

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

   • De linkerhand van de duisternis
   • Duin

2. Druk op de Escape -toets om de consolelade te openen.

3. Typ $0 en druk op Enter . Het resultaat van de uitdrukking laat zien dat $0 resulteert in <li>The Left Hand of Darkness</li> .

   

4. Beweeg de muis over het resultaat. Het knooppunt wordt gemarkeerd in de viewport.

5. Klik op <li>Dune</li> in de DOM-structuur, typ $0 opnieuw in de console en druk nogmaals op Enter . $0 wordt nu geëvalueerd als <li>Dune</li> .

   

Opslaan als globale variabele

Als u vaker naar een knooppunt moet verwijzen, kunt u het opslaan als een globale variabele.

1. Klik met de rechtermuisknop op The Big Sleep hieronder en selecteer Inspecteren .

   • De Grote Slaap
   • Het lange afscheid

2. Klik met de rechtermuisknop op <li>The Big Sleep</li> in de DOM-structuur en selecteer Opslaan als globale variabele . Zie Bijlage: Ontbrekende opties als u deze optie niet ziet.

3. Typ temp1 in de console en druk op Enter . Het resultaat van de expressie laat zien dat de variabele wordt geëvalueerd naar het knooppunt.

   

Kopieer JS-pad

Kopieer het JavaScript-pad naar een knooppunt als u ernaar moet verwijzen in een geautomatiseerde test.

1. Klik met de rechtermuisknop op de gebroeders Karamazov hieronder en selecteer Inspecteren .

   • De gebroeders Karamazov
   • Misdaad en straf

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

3. Druk op Control + V of Command + V (Mac) om de expressie in de console te plakken.

4. Druk op Enter om de expressie te evalueren.

   

Pauze bij DOM-wijzigingen

Met DevTools kunt u de JavaScript-code van een pagina pauzeren wanneer de JavaScript-code de DOM wijzigt. Zie DOM-wijzigingsbreekpunten .

Volgende stappen

Dit omvat de meeste DOM-gerelateerde functies in DevTools. Je kunt de rest ontdekken door met de rechtermuisknop op knooppunten in de DOM-structuur te klikken en te experimenteren met de andere opties die niet in deze tutorial aan bod zijn gekomen. Zie ook Sneltoetsen voor het Elementenpaneel .

Bezoek de startpagina van Chrome DevTools en ontdek wat u nog meer met DevTools kunt doen.

Zie Community als u contact wilt opnemen met het DevTools-team of hulp wilt krijgen van de DevTools-community.

Bijlage: HTML versus de DOM

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

Wanneer u een webbrowser gebruikt om een ​​pagina als https://example.com op te vragen, retourneert de server HTML zoals deze:

<!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 creëert een boomstructuur van objecten, zoals deze:

html
  head
    title
  body
    h1
    p
    script

Deze boom van objecten, of knooppunten, die de inhoud van de pagina vertegenwoordigen, wordt de DOM genoemd. Op dit moment ziet het er hetzelfde uit als de HTML, maar stel dat het script waarnaar onderaan de HTML wordt verwezen, deze code uitvoert:

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

Die code verwijdert het h1 knooppunt en voegt een p knooppunt toe aan de DOM. De complete DOM ziet er nu als volgt uit:

html
  head
    title
  body
    p
    script
    p

De HTML van de pagina verschilt nu van de DOM. Met andere woorden: HTML vertegenwoordigt de oorspronkelijke pagina-inhoud en de DOM vertegenwoordigt de huidige pagina-inhoud. Wanneer JavaScript knooppunten toevoegt, verwijdert of bewerkt, wordt de DOM anders dan de HTML.

Zie Inleiding tot de DOM voor meer informatie.

Bijlage: Scroll naar weergave

Dit is een vervolg op de sectie 'Scroll in beeld' . Volg de onderstaande instructies om de sectie te voltooien.

1. Het <li>Magritte</li> -knooppunt zou nog steeds geselecteerd moeten zijn in je DOM-boom. Zo niet, ga dan terug naar Scrollen en begin opnieuw.

2. Klik met de rechtermuisknop op het <li>Magritte</li> -knooppunt en selecteer 'In beeld schuiven' . Uw viewport schuift weer omhoog zodat u het Magritte- knooppunt kunt zien. Zie Bijlage: Ontbrekende opties als u de optie ' In beeld schuiven' niet ziet.

   

Bijlage: Ontbrekende opties

Veel instructies in deze tutorial geven je de opdracht om met de rechtermuisknop op een knooppunt in de DOM-structuur te klikken en vervolgens een optie te selecteren in het contextmenu dat verschijnt. Als je de opgegeven optie niet in het contextmenu ziet, probeer dan met de rechtermuisknop buiten de knooppunttekst te klikken.