Uzyskanie rodzicielskiej div elementu - JavaScript

W wielu sytuacjach musisz zdobyć Dent Div elementu do wykonywania różnych funkcji. Na przykład modyfikacja zawartości elementu nadrzędnego na podstawie zawartości elementu dziecka, zastosowanie stylu do grupy powiązanych elementów w wspólnym elemencie nadrzędnym i tak dalej. „„Parenement" Lub "ParentNode”Właściwości w JavaScript mogą być przydatne.

Ten post pokaże sposób, aby zdobyć Dent Div dowolnego elementu za pomocą JavaScript.

Jak zdobyć Dent Div of Element w JavaScript?

Aby zdobyć Dent Div elementu, zastosuj następujące podejścia:

• Atrybut Paretelement
• atrybut nadrzędny

Metoda 1: Zdobądź Div Div elementu za pomocą atrybutu „Paretellement”

Użyj "Parenement”Atrybut, aby uzyskać element Div Parent w JavaScript. Ta właściwość podaje element nadrzędny danego elementu w DOM. To pokazuje "zero”Jeśli element nie ma rodzica.

Składnia

Do atrybutu rodzicielskiego jest używana następująca składnia:

element.Parenement

Przykład

W pliku HTML utwórz „div”Element z nagłówkiem za pomocą elementu HTML”H4”:

Uzyskanie rodzicielskiej div elementu

Uzyskaj odniesienie elementu „H4” w znaczniku lub pliku JavaScript, wykorzystując jego przypisany identyfikator za pomocą „getElementById ()" metoda:

var getparentdivof = dokument.getElementById („nagłówek”);

Zadzwoń do "Parenement”Atrybut z nagłówkiem, aby zdobyć rodzica elementu„ H4 ”:

var paryndiv = getParentDivof.Paretelement;

Wydrukuj wynikowy element nadrzędny na konsoli:

konsola.log (rodzica);

Daje element nadrzędny, który jest „div”Elementu HTML„H4”:

Zobaczmy, kiedy element nadrzędny nie jest elementem div.

Tutaj nagłówek jest zamknięty w „Zakres„Element, który jest zamknięty w„div”:

>

Uzyskanie rodzicielskiej Div elementu za pomocą właściwości „Paretellement”

Teraz, po uzyskaniu odniesienia i elementu nadrzędnego nagłówka, sprawdź, czy element nadrzędny jest „div" używając "Nodename" atrybut. Jeśli "Tak”, Wydrukuj element inny, sprawdź nadrzędny element nadrzędnego nagłówka i wydrukuj na konsoli:

if (rodzicDiv.nodename === „div”)
konsola.log (rodzica);

w przeciwnym razie
konsola.log („rodzic elementu nie jest div, jest”);
konsola.log (rodzica);
var paryndiv = parydiv.Paretelement;
konsola.log (rodzica);

Można zauważyć, że element nadrzędny nagłówka nie jest „div" jego "Zakres”, Więc sprawdzimy nadrzędnego elementu„ rozpiętej ”nadrzędnego i wydrukujemy na konsoli, która jest„div" element:

Metoda 2: Zdobądź Div Div elementu za pomocą atrybutu „ParentNode”

Innym sposobem jest użycie „ParentNode" atrybut. Jest podobny do „Parenement" nieruchomość. Obie właściwości zwracają węzeł nadrzędny danego elementu w DOM. Istnieje jednak jedna kluczowa różnica między tymi dwoma właściwościami.

Właściwość „Paretellement” zawsze wyświetla węzeł elementu (element ma nazwę znacznika), podczas gdy właściwość „nadrzędna” może podawać typ węzła, w tym węzły elementów, węzły tekstowe, węzły komentarzy i tak dalej.

Składnia

Postępuj zgodnie z podaną składnią używaną dla atrybutu nadrzędnego:

element.ParentNode

Przykład

Tam jest "div„Element zawierający nagłówek z elementem HTML”H4”:

Uzyskanie rodzicielskiej div elementu

Po otrzymaniu odniesienia elementu wywołaj właściwość ParentNode:

var paryndiv = getParentDivof.ParentNode;

Wyjście

Chodzi o zdobycie rodzicielskiego div elementu HTML w JavaScript.

Wniosek

Aby zdobyć dziedzinę elementu, użyj „Parenement" albo "ParentNode”Atrybuty. „Paretellement” podaje węzeł elementu (element o nazwie znacznika), podczas gdy „nadrzędny” daje typ węzła. Jeśli wiesz, że rodzic elementu zawsze będzie węzłem elementu, bezpieczniej jest korzystać. Jeśli chcesz poradzić sobie z możliwością uzyskania węzła nieelementowego, powinieneś użyć właściwości ParentNode. W tym poście pokazano sposoby uzyskania rodzicielskiego Div elementu w JavaScript.