DOM parentNode ve parentElement arasındaki fark

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

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.)

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

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>

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ı.

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

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.