Sự khác biệt giữa DOM ParentNode và ParentEuity

501

Ai đó có thể giải thích cho tôi bằng những thuật ngữ đơn giản nhất có thể không, sự khác biệt giữa cha mẹ DOM cổ điển và mới được giới thiệu trong Firefox 9 ParentEuity

javascript firefox dom

— shabunc
nguồn

stackoverflow.com/questions/2899196/what-is-this-parentelement

bugzilla.mozilla.org/show_orms.cgi?id=685798

4

ParentNode dường như là tiêu chuẩn DOM, vì vậy sẽ an toàn hơn khi luôn sử dụng nó thay vì ParentEuity.

— TMS

5

@TMS w3school không phải là cơ quan có thẩm quyền: w3fools.com

— Guillaume Massé

487

parentElement là mới đối với Firefox 9 và DOM4, nhưng nó đã có mặt trong tất cả các trình duyệt chính khác từ lâu.

Trong hầu hết các trường hợp, nó giống như parentNode. Sự khác biệt duy nhất đến khi một nút parentNodekhông phải là một phần tử. Nếu vậy, parentElementlà null.

Ví dụ:

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

Vì <html>phần tử ( document.documentElement) không có cha mẹ là một phần tử, parentElementlà null. (Có những trường hợp khác, khó xảy ra hơn, parentElementcó thể xảy ra null, nhưng có lẽ bạn sẽ không bao giờ bắt gặp chúng.)

— cô đơn
nguồn

162

Nói cách khác, nó hoàn toàn vô nghĩa 99.999999999999% thời gian. Ý tưởng của ai vậy?

— Niet the Dark Tuyệt đối

25

Bản gốc parentElementlà một thứ IE độc quyền; Tôi tin rằng các trình duyệt khác tại thời điểm đó (ví dụ: Netscape) được hỗ trợ parentNodenhưng không parentElement. (Rõ ràng, với điều kiện tôi đã đề cập đến Netscape, tôi đang nói về cách trở lại IE5 và trước đó ...)

— nnnnnn

9

@lonesomeday bạn quêndocumentfragment.firstChild.parentElement === null

— Raynos

7

@Raynos Đó thực sự là tình huống chính xác mà tôi có trong đầu với câu cuối cùng trong câu trả lời của mình ...

— lonesomeday

17

Như tôi vừa khám phá, trên một phần tử SVG (như circlebên trong a g), trong IE, parentElementsẽ không được xác định và parentNodesẽ là thứ bạn đang tìm kiếm. :(

— Jason Walton

94

Trong Internet Explorer, parentElementkhông được xác định cho các phần tử SVG, trong khi parentNodeđược xác định.

— máy bay tốc độ
nguồn

10

Thành thật tôi nghĩ rằng đây là một nhận xét nhiều hơn là một câu trả lời.

— shabunc 28/03/2016

38

Có lẽ, nhưng đó là lý do tôi đập đầu vào bàn trong một giờ hoặc hơn cho đến khi tôi nhận ra. Tôi nghi ngờ nhiều người khác đến trang này sau khi đập đầu tương tự.

— siêu tốc độ

3

@speedplane Vui mừng vì đây là một câu trả lời vì điều này không có ý nghĩa logic và khiến tôi bối rối trong một thời gian ...

— siêu âm

1

Nó cũng không xác định cho các nút bình luận. Trong Chrome, tôi rất vui khi nhận được ý kiến phụ huynh, nhưng nó không được xác định trong IE.

— Simon_Weaver

Tôi không thể tìm thấy một nguồn cho điều đó. parentElementkhông được triển khai cho Nodelà biết rõ ( developer.mozilla.org/en-US/docs/Web/API/Node/ mẹo ) nhưng vì SVGElement? Tôi cũng không thể sao chép điều này với document.createElement('svg').parentElementIE 11.737.17763.0. Điều này có thể được cố định trong thời gian đó?

— epsilon

14

Sử dụng .parentElementvà bạn không thể sai miễn là bạn không sử dụng các đoạn tài liệu.

Nếu bạn sử dụng các đoạn tài liệu, thì bạn cần .parentNode:

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

Cũng thế:

let div = document.getElementById('t').content.firstChild
div.parentElement // null
div.parentNode // document fragment

<template id="t"><div></div></template>

Mở rộng đoạn trích

Rõ ràng <html>'s .parentNodeliên kết đến các tài liệu . Điều này nên được coi là một phail quyết định vì tài liệu không phải là nút vì các nút được xác định là có thể chứa được bởi các tài liệu và tài liệu không thể được chứa trong tài liệu.

— Pacerier
nguồn

6

Cũng giống như với nextSibling và nextEuitySibling , chỉ cần nhớ rằng, các thuộc tính có "phần tử" trong tên của chúng luôn trả về Elementhoặc null. Thuộc tính mà không thể trả về bất kỳ loại nút nào khác.

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

— Buksy
nguồn

1

vâng, nhưng không giống như các nút văn bản hoặc bình luận nextsibling không thể là cha mẹ.

— Jasen

0

có một sự khác biệt nữa, nhưng chỉ trong thám hiểm internet. Nó xảy ra khi bạn trộn HTML và SVG. nếu cha mẹ là 'cái khác' của hai cái đó, thì .parentNode cung cấp cho cha mẹ, trong khi .parentEuity không xác định.

— mathheadinclouds
nguồn

1

Tôi nghĩ rằng nó undefinedkhông phải là null.

— Brian Di Palma