DOM parentNode와 parentElement의 차이점

501

누군가가 가능한 한 간단한 용어로 나를 설명 할 수 있습니까? 고전적인 DOM parentNode 와 Firefox 9 parentElement 에서 새로 도입 된 것의 차이점은 무엇입니까?

javascript firefox dom

— 면도하다
소스

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

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

4

parentNode 는 DOM 표준으로 보이므로 항상 parentElement 대신 사용하는 것이 더 안전합니다.

— TMS

5

@TMS w3school은 권한이 없습니다 : w3fools.com

— 기

487

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있지만, 당신은 아마 그들을 건너 않을거야.)

— 언젠가
소스

162

즉, 시간의 99.999999999999 %가 완전히 무의미합니다. 누구의 생각 이었습니까?

— 어둠의 절대자 니트

25

원래 parentElement는 독점적 인 IE 일이었습니다. 당시 다른 브라우저 (예 : Netscape)는 지원 parentNode했지만 지원 하지 않는다고 생각 parentElement합니다. (물론, ... 나는 방법 IE5 다시 및 이전 버전에 대해서 이야기하고, 넷스케이프 언급 한 부여)

— NNNNNN

9

@lonesomeday 당신은 잊었다documentfragment.firstChild.parentElement === null

— Raynos

7

@Raynos 그것은 실제로 내 대답의 마지막 문장으로 생각했던 정확한 상황이었습니다 ...

— lonesomeday

17

방금 발견했듯이 IE 의 SVG 요소 (예 : circle내부 g) parentElement는 정의되지 않으며 parentNode원하는 것입니다. :(

— Jason Walton

94

Internet Explorer에서는 parentElementSVG 요소에 대해서는 정의되어 있지 않지만 parentNode정의되어 있습니다.

— 스피드 플레인
소스

10

솔직히 나는 이것이 답변이 아닌 의견이라고 생각합니다.

— shabunc

38

아마, 그러나 내가 알아낼 때까지 내가 한 시간 이상 테이블에 머리를 부딪친 이유입니다. 비슷한 헤드 뱅잉 후 많은 사람들이이 페이지를 방문한 것으로 보입니다.

— speedplane

3

@speedplane이 논리적 인 의미가 아니고 한동안 저를 잘게 부딪 쳤기 때문에 이것이 정답입니다 ...

— superphonic

1

주석 노드에도 정의되어 있지 않습니다. Chrome에서 나는 행복하게 의견의 부모를 얻었지만 IE에서는 정의되지 않았습니다.

— Simon_Weaver

나는 그 출처를 찾을 수 없었다. parentElement구현되지 않은 Node것은 잘 알려져 있습니다 ( developer.mozilla.org/en-US/docs/Web/API/Node/… ) SVGElement. document.createElement('svg').parentElementIE 11.737.17763.0에서는 이것을 재현 할 수 없었습니다. 그동안이 문제가 해결 되었습니까?

— epsilon

14

사용 .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받는 링크 문서 . 노드 는 문서로 포함 가능하도록 정의 되고 문서는 문서로 포함 할 수 없으므로 문서 가 노드 가 아니므로 의사 결정 단계로 간주해야합니다 .

— 페이 서 리어
소스

6

단지와 같이 로 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

— 북시
소스

1

예, 그러나 다음 텍스트와 달리 주석 노드는 부모가 될 수 없습니다.

— Jasen

0

인터넷 익스플로러에서만 차이가 있습니다. HTML과 SVG를 혼합 할 때 발생합니다. 부모가이 두 가지 중 '기타'인 경우 .parentNode는 부모를 제공하고 .parentElement는 정의되지 않습니다.

— 수학
소스

1

나는 undefined그렇지 않다고 생각합니다 null.

— 브라이언 디 팔마 12