DOM parentNode ve parentElement arasındaki fark

501

Birisi beni mümkün olduğunca basit bir şekilde açıklayabilir mi, klasik DOM parentNode ile Firefox 9 parentElement'da yeni tanıtılan arasındaki fark nedir

javascript firefox dom

— shabunc
kaynak

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

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

4

parentNode , DOM standardı gibi görünüyor, bu nedenle parentElement yerine her zaman daha güvenlidir.

— TMS

5

@TMS w3school bir otorite değil: w3fools.com

— Guillaume Massé

487

parentElement Firefox 9 ve DOM4 için yenidir, ancak diğer tüm büyük tarayıcılarda uzun zamandır mevcuttur.

Çoğu durumda, aynıdır parentNode. Tek fark, bir düğümün parentNodebir eleman olmadığı zaman gelir . Eğer öyleyse, parentElementöyle null.

Örnek olarak:

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

İtibaren <html>elemanın ( document.documentElement) bir eleman olan bir üst sahip değildir, parentElementbir null. (Olası parentElementolabilecek başka durumlar da var null, ancak muhtemelen bunlarla hiç karşılaşmayacaksınız.)

— lonesomeday
kaynak

162

Başka bir deyişle, zamanın% 99.999999999999'u anlamsızdır. Kimin fikriydi?

— Niet the Dark Absol

25

Orijinal parentElementtescilli bir IE şeydi; O zaman diğer tarayıcıların (örneğin, Netscape) desteklendiğine inanıyorum parentNodeama desteklemiyorum parentElement. (Açıkçası, Netscape'ten bahsettiğim gibi, IE5 ve öncesine giden yoldan bahsediyorum ...)

— nnnnnn

9

@lonesomeday unuttundocumentfragment.firstChild.parentElement === null

— Raynos

7

@Raynos Bu, cevabımın son cümlesini aklımda tuttuğum kesin durumdu ...

— lonesomeday

17

Az önce keşfettiğim gibi , IE'de bir SVG öğesinde (bir circleiç a gibi g) parentElementtanımsız parentNodeolacak ve aradığınız şey olacak. :(

— Jason Walton

94

Internet Explorer'da, parentElementSVG öğeleri parentNodeiçin tanımlanmamıştır.

— speedplane
kaynak

10

dürüst olmak gerekirse bu bir cevaptan ziyade bir yorumdur.

— shabunc

38

Muhtemelen, ama anladım kadar kafamı masaya bir saat veya daha fazla vurdum. Başkalarının da benzer bir kafa vurmasından sonra bu sayfaya geldiğinden şüpheleniyorum.

— speedplane

3

@speedplane Bu mantıklı bir anlam ifade etmiyor ve beni iyi bir süre için stumped gibi bir cevap bu ...

— superphonic

1

Ayrıca yorum düğümleri için tanımsızdır. Chrome'da mutlu bir şekilde yorumun üstünü alıyordum, ancak IE'de tanımsızdı.

— Simon_Weaver

Bunun için bir kaynak bulamadım. parentElementuygulanmadığı Nodeiyi bilinir ( developer.mozilla.org/en-US/docs/Web/API/Node/… ) ama SVGElement? Bunu document.createElement('svg').parentElementIE 11.737.17763.0 ile de çoğaltamadım. Bu arada belki düzeltildi mi?

— epsilon

14

Kullanın .parentElementve belge parçaları kullanmadığınız sürece yanlış gidemezsiniz.

Belge parçalarını kullanıyorsanız, aşağıdakilere ihtiyacınız vardır .parentNode:

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

Ayrıca:

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

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

Snippet'i genişlet

Görünüşe göre <html>' Belgeye.parentNode bağlantılar . Belgeler düğümleri yana düğümlerin değildir bu bir karar phail düşünülmelidir tanımlandığı dokümanlarla yer olamaz belge ve belgelerle containable olması.

— Pacerier
kaynak

6

NextSibling ve nextElementSibling gibi, adlarında "element" bulunan özelliklerin her zaman Elementveya döndürdüğünü unutmayın null. Olmayan özellikler başka bir düğüm türünü döndürebilir.

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
kaynak

1

evet, ancak bitişik metin veya yorum düğümlerinin aksine üst öğe olamaz.

— Jasen

0

bir fark daha var, ama sadece internet explorer'da. HTML ve SVG'yi karıştırdığınızda oluşur. üst öğe bu ikisinin 'diğeri' ise, .parentNode üst öğeyi verirken .parentElement tanımsız verir.

— mathheadinclouds
kaynak

1

Bence undefineddeğil null.

— Brian Di Palma