Studio Editor: Met DOM-volgorde werken

Leestijd 6 minuten

Document Object Model (DOM) verwijst naar hoe websitepagina's zijn gestructureerd en bepaalt de tab- en laadvolgorde van elementen. Het organiseren van de DOM-volgorde van een website kan de toegankelijkheid en prestaties verbeteren en bezoekers een betere ervaring bieden.

In dit artikel lees je meer over:

Goed om te weten:

Het ordenen van elementen op DOM-volgorde is vooral belangrijk bij het gebruik van complexere indelingstools op een website, zoals stapels en flexboxes.

Het belang van de DOM-volgorde

De DOM-volgorde bepaalt het laden, het lezen en de tabvolgorde van elementen op een pagina. Dit betekent dat het van invloed kan zijn op het:

Toegankelijkheid: Sommige websitebezoekers kunnen ondersteunende technologieën gebruiken om door websites te navigeren, zoals schermlezers en/of de Tab-toets. De DOM van een website bepaalt de volgorde waarin deze door schermlezers wordt gelezen, evenals de tabvolgorde. Lees meer over DOM en toegankelijkheid

Prestaties: De DOM bepaalt de volgorde waarin elementen op een website worden geladen. Door de DOM-volgorde af te stemmen op de visuele volgorde van elementen, ontstaat er daarom een logische laadervaring. Lees meer over DOM en prestaties

SEO-ranking: Aangezien een uitgelijnde, logische structuur de toegankelijkheid en het laden van de website kan verbeteren, kan het ook de SEO-ranking van de website verhogen.

Een logische DOM-volgorde is daarom belangrijk, omdat dit de beste ervaring voor websitebezoekers garandeert. Het websitemenu moet bijvoorbeeld eerst komen, gevolgd door de rest van de elementen in de koptekst, vervolgens de paginatitel, dan de pagina-inhoud, enzovoort.

Automatische DOM-volgorde

Automatische DOM is gebaseerd op de visuele volgorde van elementen op een pagina: van links naar rechts en van boven naar beneden. De DOM-volgorde wordt automatisch herschikt terwijl je elementen toevoegt, uitlijnt en het formaat ervan wijzigt, dus deze zou voortdurend geoptimaliseerd moeten blijven.

Automatische DOM uitschakelen

Als je een probleem opmerkt met de DOM-volgorde van een website waaraan je werkt, kun je dit op de hele website uitschakelen. Als er een probleem is met specifieke elementen, kun je dit uitschakelen voor afzonderlijke onderdelen en containers, evenals voor rastercellen binnen een onderdeel.

Selecteer een optie om te lezen hoe je automatische DOM uitschakelt:

De hele website

Onderdelen en containers

Rastercellen in een onderdeel

De DOM-volgorde van elementen handmatig wijzigen

Nadat je de automatische DOM-volgorde hebt uitgeschakeld, kun je deze handmatig wijzigen zodat deze overeenkomt met de visuele volgorde van elementen (van links naar rechts, van boven naar beneden).

Om de DOM-volgorde handmatig te wijzigen:

Klik links in de Editor op Lagen .
Kies wat je wilt organiseren:
- Elementen binnen een onderdeel:
  1. Selecteer een onderdeel om het te openen.
  2. Sleep de elementen naar de juiste positie.
- Onderdelen:
  1. Wijs het bovenste gedeelte aan en klik op het Meer acties-pictogram.
  2. Klik op Schikken.
  3. Klik op Naar voorgrond.
  4. Herhaal stap i-iii met alle andere onderdelen, terwijl je van boven naar beneden gaat in het paneel.

Het Lagen-paneel van een website. De cursor heeft op het Schikken-tabblad van een onderdeel geklikt en de opties worden weergegeven.

De DOM-volgorde reorganiseren

Je kunt de DOM-volgorde van elementen in een onderdeel, flexbox of stapel, of op een hele pagina met een enkele klik herschikken. De volgorde is geoptimaliseerd om overeen te komen met de visuele volgorde van de elementen (van links naar rechts en van boven naar beneden).