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

Kayce Basken
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

Deze handleiding gaat ervan uit dat u het verschil tussen de DOM en HTML kent. Raadpleeg de bijlage voor meer informatie: HTML versus de DOM .

DOM-knooppunten bekijken

In het paneel ' Elementen ' van de DOM-structuur voer je alle DOM-gerelateerde activiteiten uit in DevTools.

Een knooppunt inspecteren

Als je geïnteresseerd bent in een specifiek DOM-element, is Inspect een snelle manier om DevTools te openen en dat element te onderzoeken.

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

    • Michelangelo
    • Rafaël

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

    Het Michelangelo-knooppunt uitlichten

  2. KlikSelecteer een element .

  3. Selecteer Tokio uit de volgende lijst.

    • Tokio
    • Beiroet

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

Het inspecteren van een node is tevens de eerste stap naar het bekijken en wijzigen van de stijlen en CSS van een node.

Navigeer door de DOM-structuur met een toetsenbord.

Zodra je een knooppunt in de DOM-boom hebt geselecteerd, kun je door de DOM-boom navigeren met je toetsenbord.

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

    • George
    • Ringo
    • Paulus

    • John

      Het Ringo-knooppunt inspecteren

  2. Druk twee keer op de pijltoets omhoog . <ul> is geselecteerd.

    Het ul-knooppunt inspecteren

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

  4. Druk nogmaals op de pijltoets naar links . Het bovenliggende element van het <ul> -knooppunt wordt geselecteerd. In dit geval is dat het <li> -knooppunt dat de instructies voor stap 1 bevat.

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

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

Scroll naar beneden om het beeld te tonen

Wanneer je de DOM-structuur bekijkt, kom je soms terecht in een DOM-element dat niet in het zichtbare gedeelte van de pagina valt. Stel bijvoorbeeld dat je naar de onderkant van de pagina bent gescrold en je bent geïnteresseerd in het <h1> -element bovenaan de pagina. Met de scrollfunctie kun je het zichtbare gedeelte van de pagina snel verplaatsen, zodat je het element kunt zien.

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

    • Magritte
    • Soutine

  2. Scrol naar het gedeelte met de bijlagen. Scrol in beeld voor aanvullende instructies.

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

Toon linialen

Met linialen in uw weergavegebied kunt u de breedte en hoogte van een element meten wanneer u er met de muis overheen beweegt in het paneel Elementen .

Schakel de linialen op een van de volgende twee manieren in:

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

De maateenheid van de linialen is pixels.

Je kunt de DOM-structuur doorzoeken op basis van een tekenreeks, een CSS-selector of een XPath-selector.

  1. Plaats uw cursor op het paneel Elementen .
  2. Druk op Control + F of Command + F (macOS). De zoekbalk wordt onderaan de DOM-structuur geopend.

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

    De zoekopdracht in de zoekbalk markeren.

De zoekbalk ondersteunt ook CSS- en XPath-selectors.

Het paneel Elementen selecteert het eerste overeenkomende resultaat in de DOM-structuur en rolt dit naar de weergave in de viewport. Standaard gebeurt dit terwijl u typt. Als u vaak met lange zoekopdrachten werkt, kunt u DevTools zo instellen dat de zoekopdracht alleen wordt uitgevoerd wanneer u op Enter drukt.

Om onnodige sprongen tussen knooppunten te voorkomen, schakelt u de uit via Instellingen > Voorkeuren > Algemeen > Zoeken tijdens het typen .

Schakel het selectievakje 'Zoeken tijdens het typen' uit in de instellingen.

Bewerk de DOM

Je kunt de DOM direct aanpassen en zien hoe die wijzigingen de pagina beïnvloeden.

Inhoud bewerken

Om de inhoud van een knooppunt te bewerken, dubbelklik je op de inhoud in de DOM-structuur.

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

    • Frituren
    • 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 is geselecteerd.

    De tekst bewerken

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

Bewerk attributen

Om attributen te bewerken, dubbelklik je op de naam of waarde van het attribuut. Volg deze instructies om te leren hoe je attributen aan een knooppunt toevoegt.

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

    • Howard
    • Vince

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

    Na een klik wordt het knooppunt gemarkeerd om aan te geven dat het geselecteerd is.

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

    Een stijlkenmerk toevoegen aan het knooppunt

Knooppunttype bewerken

Om het type van een knooppunt te wijzigen, dubbelklik je op het type en typ je vervolgens het nieuwe type in.

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

    • Decaan
    • Streng
    • Thaddeus
    • Brock

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

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

    Het knooppunttype wijzigen naar knop

Bewerken als HTML

Om knooppunten als HTML te bewerken met syntaxmarkering en automatisch aanvullen, selecteer je 'Bewerken als HTML' in het vervolgkeuzemenu van het knooppunt.

  1. Klik hieronder met de rechtermuisknop op Leonard 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.

    Het dropdownmenu van een knooppunt.

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

    Automatische aanvulling van HTML-tags.

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

    DevTools sluit de tag automatisch.

  5. Typ Sheldon in het tagveld en druk op Control of Command + Enter om de wijzigingen toe te passen.

Een knooppunt dupliceren

Je kunt een element dupliceren met de rechtermuisklikoptie 'Element dupliceren' .

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

    • Vreugdevuur der ijdelheden
    • Nana
    • Orlando
    • Witte ruis

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

    De optie 'Element dupliceren' is gemarkeerd in het keuzemenu.

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

Je kunt ook de volgende sneltoetsen gebruiken: Shift + Alt + Pijl omlaag (Windows en Linux) en Shift + Option + Pijl omlaag (macOS).

Maak een schermafbeelding van een knooppunt

Je kunt een screenshot maken van elk afzonderlijk knooppunt in de DOM-boom.

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

  2. Klik in het paneel Elementen met de rechtermuisknop op de afbeeldings-URL en selecteer 'Schermafbeelding van knooppunt vastleggen' in het vervolgkeuzemenu.

    Er wordt een schermafbeelding van een knooppunt gemaakt.

  3. De schermafbeelding wordt opgeslagen in uw downloads ( Windows en macOS ).

Lees meer over 4 manieren om screenshots te maken met DevTools .

DOM-nodes opnieuw rangschikken

Sleep de 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 in de DOM-structuur <li>Elvis Presley</li> naar de bovenkant van de lijst.

Krachttoestand

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

  1. Beweeg de muis over het item 'Lord of the Flies' in de lijst. De achtergrondkleur wordt oranje.

    • Heer der Vliegen
    • Misdaad en straf
    • Moby Dick

  2. Klik met de rechtermuisknop op het item 'The Lord of the Flies' in de lijst en selecteer 'Inspecteren' .

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

    De achtergrondkleur blijft oranje, ook al beweeg je de muis niet daadwerkelijk over het knooppunt.

Een knooppunt 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
    • De sterren, mijn bestemming

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

    Hoe het knooppunt eruitziet in de DOM-structuur nadat het is verborgen.

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

Een knooppunt verwijderen

Druk op Delete om een ​​knooppunt te verwijderen.

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

    • De Geïllustreerde Man
    • Door de spiegel
    • Fundering

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

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

Toegang tot knooppunten in de console

DevTools biedt een aantal snelkoppelingen om DOM-nodes vanuit de console te benaderen of JavaScript-referenties ernaar te verkrijgen.

Verwijs naar het momenteel geselecteerde knooppunt met $0

Wanneer je een knooppunt inspecteert, 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' .

    • De Linkerhand van de Duisternis
    • Duin

  2. Druk op de Escape- toets om de consolelade te openen. Mogelijk moet u 'Console' selecteren om deze te openen.

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

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

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

  5. Klik op <li>Dune</li> in de DOM-structuur, typ opnieuw $0 in de console en druk vervolgens weer op Enter . Nu wordt $0 geëvalueerd tot <li>Dune</li> .

    Het resultaat van de tweede $0-expressie in de console.

Opslaan als globale variabele

Als je vaak naar een bepaald knooppunt wilt verwijzen, sla het dan op als een globale variabele.

  1. Klik in de volgende lijst met de rechtermuisknop op The Big Sleep 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' . Als je deze optie niet kunt vinden, lees dan meer over ontbrekende opties .

  3. Typ temp1 in de console en druk op Enter . Het resultaat van de expressie laat zien dat de variabele de waarde van het knooppunt oplevert. Klik op het knooppunt om het lijstitem uit te vouwen.

    Het resultaat van de temp1-expressie.

JS-pad kopiëren

Kopieer het JavaScript-pad naar een node 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-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 (macOS) om de expressie in de console te plakken.

  4. Druk op Enter om de expressie te evalueren.

    Het resultaat van de Copy JS Path-expressie

Break-out bij DOM-wijzigingen

Met DevTools kun je de JavaScript-code van een pagina pauzeren wanneer deze de DOM wijzigt. Lees meer over breakpoints voor DOM-wijzigingen .

Volgende stappen

Dat dekt de meeste DOM-gerelateerde functies in DevTools. Je kunt de rest ontdekken door met de rechtermuisknop op knooppunten in de DOM-boom te klikken en te experimenteren met de opties die niet in deze handleiding aan bod zijn gekomen.

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

Leer meer over specifieke onderwerpen.

HTML versus de DOM

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

Wanneer je een webbrowser gebruikt om een ​​pagina zoals https://example.com op te vragen, stuurt de server een HTML-document terug:

<!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 analyseert de HTML en creëert een boomstructuur van objecten:

html
  head
    title
  body
    h1
    p
    script

Deze boomstructuur van objecten, of knooppunten, vertegenwoordigt de inhoud van de pagina. Dit wordt het documentobjectmodel genoemd, of kortweg DOM. Op dit moment zijn de objecten in zowel de DOM als de HTML hetzelfde.

Stel dat het bestand script.js 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 het h1 element en voegt een nieuw p element toe aan de DOM. De DOM ziet er nu als volgt uit:

html
  head
    title
  body
    p
    script
    p

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

HTML vertegenwoordigt de initiële pagina-inhoud en de DOM vertegenwoordigt de actieve, huidige pagina-inhoud. Wanneer JavaScript knooppunten toevoegt, verwijdert of bewerkt, verandert de DOM van de HTML.

Lees meer in de introductie tot het DOM op MDN.

Scroll naar beneden om het beeld te tonen

Dit is een vervolg op het gedeelte ' Scrollen om in beeld te komen '. Volg de instructies om dit gedeelte te voltooien.

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

  2. Klik met de rechtermuisknop op het <li>Magritte</li> -knooppunt en selecteer 'Scrollen in beeld' . Uw weergavegebied wordt weer omhoog gescrold, zodat u het Magritte- knooppunt kunt zien. Als 'Scrollen in beeld' ontbreekt, lees dan meer over de ontbrekende opties .

Ontbrekende opties

Veel instructies in deze handleiding vragen je 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 gewenste optie niet in het contextmenu ziet, probeer dan met de rechtermuisknop buiten de tekst van het knooppunt te klikken.

Waar moet ik klikken als ik niet alle opties zie?