Как получить доступ к родительскому элементу с помощью свойства родительского элемента HTML DOM

Kak Polucit Dostup K Roditel Skomu Elementu S Pomos U Svojstva Roditel Skogo Elementa Html Dom



Добавляя несколько функций в объектную модель документа (DOM) с помощью JavaScript, разработчику часто приходится анализировать связь элементов. Этого можно достичь путем регистрации родительского элемента целевого элемента(ов), что оптимизирует поток кода и форматирование включенных функций на сайт.

Обзор содержания

Что такое свойство «parentElement» в JavaScript?

« родительскийэлемент Свойство ” в JavaScript извлекает элемент, который является родительским для целевого элемента.

Как получить доступ/вызвать родительский элемент через свойство родительского элемента HTML DOM?

Доступ к родительскому элементу можно получить с помощью HTML DOM. родительскийэлемент ” имущество с “ имя_узла » или вместо этого получить узел родительского элемента через « родительский узел ' свойство.





Синтаксис



узел. родительскийэлемент

Возвращаемое значение
Это свойство извлекает объект элемента, который представляет узел родительского элемента узла и дает « нулевой », если узел не содержит родительского узла.



Используемые общие методы и свойства

документ.querySelector() : этот метод получает первый элемент, соответствующий селектору CSS.



Синтаксис

документ. запросселектор ( этот )

В этом синтаксисе « этот » относится к одному или нескольким селекторам CSS.



документ.getElementById() : возвращает элемент с указанным идентификатором.

Синтаксис

документ. getElementById ( идентификатор )

Здесь, ' идентификатор » указывает идентификатор целевого элемента, который необходимо получить.

выбранныйиндекс : это свойство извлекает индекс выбранного параметра из раскрывающегося списка. '-1' опция отменяет выбор всех опций.

имя_узла : это свойство получает имя узла.

дети : это свойство возвращает дочерние элементы элемента в виде коллекции.

внешнийHTML : это свойство выделяет или извлекает элемент HTML, а также его атрибуты, а также начальный и конечный теги.

родительский узел : это конкретное свойство извлекает родительский узел элемента или узла.

Примечание : Разница между « родительскийэлемент ' и ' родительский узел ” заключается в том, что предыдущее свойство, т. е. “parentElement”, дает “ нулевой », если родительский узел не отражает узел элемента.

Пример 1. Доступ к родительскому элементу через свойство «parentElement» в JavaScript.

В этом примере вызывается родительский элемент элемента и отображается имя его (родительского) узла при нажатии кнопки.

HTML-код


< HTML >
< тело >
< ч1 > Свойство родительский элемент в JavaScript < / ч1 >
< ч2 > Выберите язык: < / ч2 >
< выбирать сорт '=' 'элемент' >
< вариант > Питон < / вариант >
< вариант > Джава < / вариант >
< вариант > JavaScript < / вариант >
< / выбирать >
< кнопка по щелчку '=' 'дисплейРодитель()' сорт '=' 'кнопка' > Отображение родительского элемента элемента «option» < / кнопка >
< div сорт '=' 'температура' >< / div >< / тело >
< HTML >

В этом коде:

  • Укажите данный «

    » и «

    » элементы, которые включают заголовки первого и второго уровня соответственно.

  • После этого создайте «<выбрать>» элемент, представленный данным классом, который содержит дополнительные дочерние элементы, т.е. «<опция>» .
  • Теперь создайте кнопку, связанную с « по щелчку ” событие, которое перенаправляет на «дисплейРодитель()» функция при нажатии кнопки.
  • Наконец, укажите «
    » элемент, в котором должен отображаться результат, т. е. доступный родительский элемент.

CSS-код

<стиль >
тело {
выравнивание текста : центр ;
цвет : #ффф ;
фоновый цвет : серый ;
высота : 100% ;
}
.кнопка {
высота : 2рем ;
граница-радиус : 2 пикселя ;
ширина : 35% ;
допуск : 2рем авто ;
отображать : блокировать ;
цвет : #ba0b0b ;
курсор : указатель ;
}
.temp {
размер шрифта : 1,5рем ;
вес шрифта : смелый ;
}
>

В приведенном выше коде CSS:

  • Оформите всю веб-страницу с помощью примененных свойств «text-align», «background-color» и т. д.
  • Аналогичным образом примените стиль к созданной кнопке через ее класс, отрегулировав ее высоту, ширину, отображение, цвет и т. д.
  • Наконец, придайте стиль « div », ссылаясь на имя класса, в котором должен отображаться родительский элемент, к которому осуществляется доступ.

JavaScript-код



< сценарий >
функция дисплейРодитель ( ) {
был получать '=' документ. запросселектор ( '.элемент' ) ;
был этот '=' получать . параметры [ получать . выбранныйиндекс ] ;
был добавить '=' документ. запросселектор ( '.temp' ) ;
добавить. внутреннийHTML '=' «Родительский элемент параметра Element — ->» + этот. родительскийэлемент . имя_узла ;
}
сценарий >

Согласно этим строкам кода:

  • Определите функцию «дисплейРодитель()» который обращается к элементу «