В этом посте объясняется свойство «previousElementSibling» элемента HTML DOM с использованием JavaScript.
Что такое свойство элемента HTML DOM «previousElementSibling»?
Элемент DOM (объектная модель документа) « предыдущийЭлементСиблинг ” — это свойство, доступное только для чтения, которое помогает получить предыдущий одноуровневый элемент в том же дереве. Это свойство возвращает содержимое предыдущего элемента того же уровня.
Синтаксис
элемент. предыдущийЭлементСиблинг
Этот синтаксис возвращает « нить », содержащий HTML-контент предыдущего родственного элемента, и « нулевой ', если его нет.
Давайте используем определенный выше синтаксис на практике, чтобы показать работу свойства «previousElementSibling».
Пример. Применение свойства «previousElementSibling» для возврата содержимого предыдущего одноуровневого элемента
В этом примере используется свойство JavaScript «previousElementSibling», чтобы получить HTML-контент предыдущего родственного элемента.
HTML-код
Во-первых, обзор следующего HTML-кода:
< ул >< что идентификатор '=' 'первый' > HTML < / что >
< что идентификатор '=' 'второй' > CSS < / что >
< что идентификатор '=' 'третий' > JavaScript < / что >
< / ул >
< п идентификатор '=' 'для' >< / п >
В приведенных выше строках кода:
- “ <ул> Тег добавляет неупорядоченный список.
- Внутри неупорядоченного списка несколько элементов встраиваются с помощью « <это> ” с присвоенными им идентификаторами.
- Наконец, « <р> » встраивает пустой абзац с уникальным идентификатором «para».
JavaScript-код
Теперь продолжим с кодом JavaScript:
< сценарий >пусть пункт '=' документ. получитьэлементбиид ( 'третий' ) . предыдущийЭлементСиблинг . внутреннийHTML ;
документ. получитьэлементбиид ( 'для' ) . внутреннийHTML '=' ' Предыдущий брат третьего элемента : ' + элемент ;
сценарий >
Согласно приведенному выше фрагменту кода:
- Переменная «item» сначала использует « получитьэлемент по идентификатору() », чтобы получить доступ к целевому элементу списка, используя его идентификатор «третий», а затем применить « предыдущийЭлементСиблинг », чтобы получить его предыдущего брата.
- После этого « получитьэлемент по идентификатору() » обращается к добавленному пустому абзацу, используя его идентификатор «para», чтобы добавить к нему значение переменной «item», т. е. предыдущий родственный элемент.
Выход
Как видно, результат показывает предыдущий родственный элемент целевого элемента, то есть (JavaScript).
Заключение
JavaScript предоставляет предопределенный элемент DOM « предыдущийЭлементСиблинг », чтобы получить предыдущий одноуровневый элемент элемента. Он возвращает предыдущего родственного элемента элемента из того же уровня дерева, где находится целевой элемент. В этом посте подробно объясняется свойство элемента HTML DOM «previousElementSibling» в JavaScript.