Разница между DOM parentNode и parentElement - PullRequest
Новая
       3

Разница между DOM parentNode и parentElement

404 голосов
/ 31 декабря 2011

Может кто-нибудь объяснить мне как можно более простыми словами, в чем разница между классическим DOM parentNode и новым представлением в Firefox 9 parentElement

Ответы [ 5 ]

388 голосов
/ 31 декабря 2011

parentElement является новым для Firefox 9 и DOM4, но он присутствует во всех других основных браузерах целую вечность.

В большинстве случаев это то же самое, что и parentNode. Единственное отличие возникает, когда узел parentNode не является элементом. Если это так, parentElement равно null.

Как пример: 

document.body.parentNode; // the <html> element
document.body.parentElement; // the <html> element

document.documentElement.parentNode; // the document node
document.documentElement.parentElement; // null

(document.documentElement.parentNode === document);  // true
(document.documentElement.parentElement === document);  // false

Поскольку элемент <html> (document.documentElement) не имеет родителя, который является элементом, parentElement равен null. (Существуют и другие, более маловероятные случаи, когда parentElement может быть null, но вы, вероятно, никогда их не встретите.)

82 голосов
/ 28 марта 2016

В Internet Explorer parentElement не определено для элементов SVG, тогда как parentNode определено.

11 голосов
/ 28 сентября 2017

Используйте .parentElement, и вы не ошибетесь, если не используете фрагменты документа.

Если вы используете фрагменты документа, тогда вам нужно .parentNode: 

let div = document.createDocumentFragment().appendChild(document.createElement('div'));
div.parentElement // null
div.parentNode // document fragment

Также: 

let div = document.getElementById('t').content.firstChild
div.parentElement // null
div.parentNode // document fragment
<template id="t"><div></div></template>

Очевидно, <html> .parentNode ссылается на Документ . Это следует рассматривать как этап принятия решения, так как документы не являются узлами, поскольку узлы определены как для содержания в документах, а документы не могут содержаться в документах.

5 голосов
/ 31 декабря 2011

Редактировать: Отчасти это неправильно.Подробности см. В комментариях ниже

Все Element объекты также являются Node объектами (поскольку Element является потомком Node).Но есть Node, который не является Element ... document объектом.Таким образом, ваш элемент <html> имеет родительский узел (document), но у него нет родительского элемента.

Причина, по которой требуется parentElement вместо parentNode, заключается в том, что HTML5Строго не требуется элемент <html>, поэтому практически любой элемент может иметь родительский узел, не имея родительского элемента.Поэтому, если бы моя HTML-страница выглядела так: 

<!doctype html>
<title>My page</title>
<header>This is my page</header>
<div id="body">
  <p>This is some text from my page</p>
</div>
<footer>
  Copyright, me
</footer>

, тогда элементы title, header, #body и footer имели бы свои parentNode как document, но их parentElement будет нулевым.Только тег p будет иметь parentElement, то есть #body.(Обратите внимание, что я бы не советовал это как структуру страницы ... придерживайтесь чего-то более традиционного.)

Вы можете повторить это примерно так: 

if (myElement.parentNode instanceof Element) {
    myElement.parentElement = myElement.parentNode;
} else {
    myElement.parentElement = null;
}
3 голосов
/ 31 августа 2017

Так же, как с nextSibling и nextElementSibling , просто помните, что свойства с «элементом» в их имени всегда возвращают Element или null. Свойства без могут возвращать любой другой вид узла. 

console.log(document.body.parentNode, "is body's parent node");    // returns <html>
console.log(document.body.parentElement, "is body's parent element"); // returns <html>

var html = document.body.parentElement;
console.log(html.parentNode, "is html's parent node"); // returns document
console.log(html.parentElement, "is html's parent element"); // returns null
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...