PricingLoginStart free
jQuery Academy · leksjon

Effektive teknikker for DOM-navigering

Bli fortrolig med metoder som .closest(), .siblings(), .find() og .parentsUntil() for effektiv navigering i DOM-treet og for å unngå ytelsesflaskehalser.

Leksjon 3 av 311 trinn

Effektive teknikker for DOM-navigering er en gratis leksjon i jQuery Academy på CoddyKit. Dette er leksjon 3 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i jQuery Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i jQuery Academy inneholder totalt 3 leksjoner.

Navigere i DOM-treet

Velkommen! I denne leksjonen skal du lære effektive teknikker for å bevege deg rundt i Document Object Model (DOM).

DOM-en er som et familietre for elementene på nettsiden. Når du forstår hvordan du traverserer den, kan du velge elementer presist, selv uten direkte ID-er eller klasser.

  • Traversere: Å bevege seg på tvers av eller gjennom noe.
  • DOM: Nettleserens interne representasjon av HTML-strukturen din.

Finne etterkommere med .find()

Metoden .find() er perfekt for å finne etterkommere. Den søker *inni* de valgte elementene etter treff.

Tenk på det som å lete etter bestemte gjenstander i en bestemt eske. Den er svært nyttig for å begrense søket.

  • Syntaks: $(selector).find(filterSelector)
  • Returnerer: Et nytt jQuery-objekt som inneholder de funne etterkommerne.

.find() i praksis

La oss finne alle listeelementene (<li>) inni en bestemt usortert liste (<ul>).

Prøv å kjøre koden og se hvilke elementer som får grønn bakgrunn!

<div id="container">
  <ul id="myList">
    <li>Item 1</li>
    <li class="active">Item 2</li>
    <li>Item 3</li>
  </ul>
  <p>Some other text</p>
  <ul id="anotherList">
    <li>Item A</li>
    <li>Item B</li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Find all <li> elements within #myList
    $('#myList').find('li').css('background-color', 'lightgreen');

    // You can also chain with specific selectors
    $('#myList').find('.active').css('font-weight', 'bold');
  });
</script>

Bevege seg opp med .closest()

Noen ganger trenger du å finne et overordnet element (en forelder, besteforelder eller lignende) til et element. Metoden .closest() gjør akkurat dette.

Den starter med det gjeldende elementet og beveger seg *oppover* i DOM-treet. Deretter returnerer den den *første* overordnede elementet som samsvarer med den angitte selektoren.

  • Syntaks: $(selector).closest(filterSelector)
  • Returnerer: Et jQuery-objekt som inneholder det ene nærmeste overordnede elementet.

.closest() i praksis

Se for deg at du klikker på en knapp dypt inne i en nestet struktur. Du vil finne hovedbeholderen. .closest() passer perfekt til dette.

Klikk på knappen nedenfor for å utheve det nærmeste overordnede <div>-elementet.

<div class="grandparent">
  <div class="parent">
    <p>Some text here</p>
    <button id="myButton">Click Me</button>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myButton').on('click', function() {
      // Find the closest ancestor div and add a border
      $(this).closest('div').css('border', '2px solid blue');
    });
  });
</script>

Utforske søskenelementer med .siblings()

Elementer på samme nivå i DOM-treet kalles «søsken». Metoden .siblings() hjelper deg med å velge alle disse.

Den finner alle elementer som har samme forelder som det gjeldende elementet, *unntatt* selve det gjeldende elementet.

  • Syntaks: $(selector).siblings(filterSelector)
  • Returnerer: Et nytt jQuery-objekt med alle søskenelementene.

.siblings() i praksis

La oss utheve alle søskenelementene til et bestemt listeelement når du klikker på det. Dette er nyttig for interaktive lister eller menyer.

Klikk på et listeelement for å se søskenelementene endre farge!

<ul id="menu">
  <li>Home</li>
  <li class="current">About</li>
  <li>Services</li>
  <li>Contact</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#menu li').on('click', function() {
      // Remove highlight from previously selected siblings
      $('#menu li').css('background-color', '');
      // Highlight the clicked item's siblings
      $(this).siblings().css('background-color', 'lightyellow');
      // Highlight the clicked item itself (optional)
      $(this).css('background-color', 'lightblue');
    });
  });
</script>

Bevege seg opp med .parentsUntil()

Hva om du vil velge *flere* overordnede elementer, men stoppe ved et bestemt punkt? Da er .parentsUntil() nyttig.

Denne metoden beveger seg oppover i DOM-treet og velger alle overordnede elementer til det gjeldende elementet, *til* den når et element som er angitt av selektoren. Selve «stopp»-elementet tas ikke med.

  • Syntaks: $(selector).parentsUntil(stopSelector, filterSelector)
  • Returnerer: Et jQuery-objekt med de valgte overordnede elementene.

.parentsUntil() i praksis

Vi har en dypt nestet struktur. La oss velge alle foreldreelementene til en <span> til vi treffer en bestemt <div class="container">.

Kjør dette eksempelet for å se hvilke elementer som får en kantlinje, men legg merke til at selve «container»-div-en hoppes over!

<div class="body-wrapper">
  <div class="container">
    <div class="row">
      <section>
        <article>
          <p>Hello <span>World!</span></p>
        </article>
      </section>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    // Find all parents of 'span' until the '.container' div
    $('span').parentsUntil('.container').css('border', '1px dashed orange');
  });
</script>

Rask kontroll

Du har et <img>-element som ligger inni en <div class="gallery-item">, som igjen ligger inni en <div class="gallery-row">. Hvis du velger <img>-elementet, hvilken jQuery-metode bruker du for å hente *bare* <div class="gallery-item">?

Besvar den i den interaktive leksjonen

Oppsummering: Effektiv DOM-traversering

Godt jobbet! Du har lært de viktigste jQuery-metodene for effektiv DOM-traversering:

  • .find(): Søker *inni* elementer etter etterkommere.
  • .closest(): Finner det *nærmeste overordnede elementet* som samsvarer med en selektor, ved å gå *oppover* i treet.
  • .siblings(): Velger alle elementer på *samme nivå* som det gjeldende elementet (bortsett fra selve elementet).
  • .parentsUntil(): Velger flere overordnede elementer *opp til* (men ikke inkludert) et angitt stoppelement.

Når du bruker disse metodene på riktig måte, kan du skrive mer presis, effektiv og lettlest jQuery-kode for dynamiske webapplikasjoner!

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
22
Leksjoner
48
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «Effektive teknikker for DOM-navigering» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien jQuery Academy, inkludert «Effektive teknikker for DOM-navigering», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i jQuery Academy inneholder totalt 3 leksjoner.

Hva lærer jeg i «Effektive teknikker for DOM-navigering»?

Bli fortrolig med metoder som .closest(), .siblings(), .find() og .parentsUntil() for effektiv navigering i DOM-treet og for å unngå ytelsesflaskehalser. Du øver på jQuery Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med jQuery Academy?

Ingen tidligere erfaring er nødvendig. jQuery Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 3.

Hvor lang tid tar leksjonen «Effektive teknikker for DOM-navigering»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne jQuery Academy-leksjonen?

Ja. Alle jQuery Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Avanserte attributtvelgere
  2. Pseudoklasser og egendefinerte velgere
  3. Effektive teknikker for DOM-navigering
← Tilbake til jQuery Academy