Hva er HTML DOM Element previousElementSibling Property i JavaScript

Hva Er Html Dom Element Previouselementsibling Property I Javascript



DOM tilsvarer ' Dokumentobjektmodell ” som opprettes når HTML-siden lastes inn i nettleseren. Den representerer et treobjekt som har én rotnode og flere overordnede og underordnede noder. Det angir i utgangspunktet den hierarkiske strukturen til HTML-elementene som brukes på den gjeldende nettsiden. Brukeren kan enkelt og raskt søke ut de nødvendige overordnede og underordnede nodene fra den. Dessuten lar det også brukeren få tilgang til søsken til et element. Det kan være neste eller forrige søsken i forhold til den målrettede noden. I JavaScript kan den forrige søskennoden/elementet nås ved å bruke ' forrigeElementSøsken ' eiendom.

Dette innlegget forklarer HTML DOM-elementet 'previousElementSibling'-egenskapen ved å bruke JavaScript.

Hva er HTML DOM Element 'previousElementSibling' egenskapen?

DOM (Document Object Model)-elementet ' forrigeElementSøsken ” er en skrivebeskyttet egenskap som hjelper til med å hente forrige søsken til et element i samme tre. Denne egenskapen returnerer innholdet til forrige søsken.







Syntaks



element. forrigeElementSøsken

Denne syntaksen returnerer ' streng ' som inneholder HTML-innholdet til forrige søsken, og ' null ' hvis den ikke eksisterer.







La oss bruke den ovenfor definerte syntaksen praktisk talt for å vise hvordan egenskapen 'previousElementSibling' fungerer.



Eksempel: Bruk av «previousElementSibling»-egenskapen for å returnere forrige søskens innhold

Dette eksemplet bruker JavaScript-egenskapen «previousElementSibling» for å hente forrige søskens HTML-innhold.

HTML-kode

Først en oversikt over følgende HTML-kode:

< ul >
< at id = 'først' > HTML < / at >
< at id = 'sekund' > CSS < / at >
< at id = 'tredje' > JavaScript < / at >
< / ul >
< s id = 'til' >< / s >

I kodelinjene ovenfor:

  • «
      ”-taggen legger til en uordnet liste.
    • Inne i den uordnede listen er flere elementer innebygd ved å bruke ' ”-tag med deres tilordnede IDer.
    • Til slutt, '

      '-taggen bygger inn et tomt avsnitt med en unik id 'para'.

    JavaScript-kode

    Fortsett nå med JavaScript-koden:

    < manus >
    la vare = dokument. getElementById ( 'tredje' ) . forrigeElementSøsken . indreHTML ;
    dokument. getElementById ( 'til' ) . indreHTML = ' Tidligere søsken til tredje element er : ' + punkt ;
    manus >

    I henhold til kodebiten ovenfor:

    • Variabelen 'item' bruker først ' getElementById() '-metoden for å få tilgang til det målrettede listeelementet ved å bruke ID-en 'tredje' og deretter bruke ' forrigeElementSøsken ” eiendom for å få sitt forrige søsken.
    • Etter det, ' getElementById() ”-metoden får tilgang til det tomme avsnittet som er lagt til ved å bruke ID-en “para” for å legge det til verdien for “item”-variabelen, dvs. forrige søsken.

    Produksjon

    Som sett viser resultatet forrige søsken til det målrettede elementet, dvs. (JavaScript).

    Konklusjon

    JavaScript gir det forhåndsdefinerte DOM-elementet ' forrigeElementSøsken ” egenskap for å hente forrige søsken til et element. Den returnerer forrige søsken til et element fra samme trenivå der målelementet ligger. Dette innlegget forklarte dyptgående HTML DOM-elementet «previousElementSibling»-egenskapen i JavaScript.