W tym poście wyjaśniono właściwość „previousElementSibling” elementu HTML DOM przy użyciu JavaScript.
Co to jest właściwość „previousElementSibling” elementu HTML DOM?
Element DOM (Document Object Model) „ poprzedniElementRodzeństwo ” to właściwość tylko do odczytu, która pomaga odzyskać poprzedni element rodzeństwa w tym samym drzewie. Ta właściwość zwraca zawartość poprzedniego elementu równorzędnego.
Składnia
element. poprzedniElementRodzeństwo
Ta składnia zwraca „ strunowy ” zawierający treść HTML poprzedniego rodzeństwa oraz „ zero ”, jeśli nie istnieje.
Użyjmy wyżej zdefiniowanej składni, aby praktycznie pokazać działanie właściwości „previousElementSibling”.
Przykład: zastosowanie właściwości „previousElementSibling” w celu zwrócenia zawartości poprzedniego rodzeństwa
W tym przykładzie zastosowano właściwość JavaScript „previousElementSibling”, aby uzyskać zawartość HTML poprzedniego rodzeństwa.
Kod HTML
Najpierw omówienie następującego kodu HTML:
< ul >< To ID = 'Pierwszy' > HTML < / To >
< To ID = 'drugi' > CSS < / To >
< To ID = 'trzeci' > JavaScript < / To >
< / ul >
< P ID = 'Do' >< / P >
W powyższych liniach kodu:
- „
- Wewnątrz nieuporządkowanej listy osadzonych jest wiele elementów za pomocą „
” z przypisanymi im identyfikatorami. - Wreszcie „ ” osadza pusty akapit z unikalnym identyfikatorem „para”.
Kod JavaScript
Teraz kontynuuj z kodem JavaScript:
< scenariusz >pozwól przedmiotowi = dokument. getElementById ( 'trzeci' ) . poprzedniElementRodzeństwo . wewnętrzny HTML ;
dokument. getElementById ( 'Do' ) . wewnętrzny HTML = ' Poprzednie rodzeństwo trzeciego elementu to : ' + przedmiot ;
scenariusz >
Zgodnie z powyższym fragmentem kodu:
- Zmienna „item” najpierw używa „ getElementById() ”, aby uzyskać dostęp do elementu listy docelowej przy użyciu jego identyfikatora „trzeci”, a następnie zastosować metodę „ poprzedniElementRodzeństwo ”, aby uzyskać jego poprzednie rodzeństwo.
- Następnie „ getElementById() ” uzyskuje dostęp do dodanego pustego akapitu za pomocą jego identyfikatora „para”, aby dołączyć go do wartości zmiennej „item”, tj. poprzedniego rodzeństwa.
Wyjście
Jak widać, wynik pokazuje poprzednie rodzeństwo docelowego elementu, tj. (JavaScript).
Wniosek
JavaScript udostępnia predefiniowany element DOM „ poprzedniElementRodzeństwo ”, aby pobrać poprzednie rodzeństwo elementu. Zwraca poprzednie rodzeństwo elementu z tego samego poziomu drzewa, na którym znajduje się element docelowy. W tym poście dokładnie wyjaśniono właściwość elementu HTML DOM „previousElementSibling” w JavaScript.