Свойство parentElement элемента HTML DOM

Определение и использование

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

parentElement и parentNode различие заключается в том, что если родительский узел не является элементным узлом, то parentElement возврат null:

document.body.parentNode; // возвращает элемент <html>
document.body.parentElement; // возвращает элемент <html>
document.documentElement.parentNode; // возвращает узел документа
document.documentElement.parentElement; // возвращает null (<html> не имеет родительского ELEMENT узла)

В большинстве случаев, использование哪个 свойства не важно, но parentNode может быть наиболее популярным.

Эта свойство является только для чтения.

HTML узел и элемент

в HTML DOM(Документ объектной модели) в HTML документ является集合ом узлов (или без них), имеющих (или не имеющих) дочерние узлы.

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

элементмеж элементами также являются текстовыми узлами.

а элемент является только элементным узлом.

дочерние узлы и дочерние элементы

childNodes возвратдочерние узлы(узловые элементы, текстовые узлы и комментирующие узлы).

children возвратдочерние элементы(а не текстовые и комментирующие узлы).

братские и элементные братья

братскиеявляются "братами" и "сестрами".

братскиеявляются узлами, имеющими одинакового родительского узла (в одном и том же childNodes в списке).

братские элементыявляются элементами, имеющими одинакового родительского элемента (в одном и том же children в списке).

Пример

Пример 1

Получите имя узла родительского элемента элемента <li>:

var x = document.getElementById("myLI").parentElement.nodeName;

Попробуйте сами

Пример 2

Нажмите на элемент (<span>), чтобы скрыть его родительский элемент (<div>):

<div>
  <span onclick="this.parentElement.style.display = 'none';">x</span>
</div>

Попробуйте сами

Синтаксис

node.parentElement

Возвратное значение

Тип Описание
Объект Element означает родительский элемент узла.
null если у узла нет родительского узла.

Поддержка браузерами

element.parentElement Это функция уровня DOM Level 3 (2004).

Все браузеры полностью поддерживают его:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка