DOM parentNode和parentElement之间的区别
有人可以在尽可能简单的解释我，古典DOM parentNode和新引入的Firefox 9 parentElement之间有什么区别
parentElement是Firefox 9和DOM4的新成员，但它已经在所有其他主stream浏览器中出现过很久了。
在大多数情况下，它与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
由于<html>元素（ document.documentElement ）没有父元素， parentElement为null 。 （还有其他更不可能的情况， parentElement可能为null ，但是你可能永远不会碰到它们。）
在Internet Explorer中， parentElement对于SVG元素是未定义的，而parentNode是定义的。
编辑： 这是错的。 详情请参阅下面的评论
所有Element对象也是Node对象（因为Element是Node的后代）。 但是有一个不是Element的Node … 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元素将#body作为document ，但是它们的parentElement将为空。 只有p标签才会有一个parentElement ，它是#body 。 （请注意，我不会build议这是一个页面结构…坚持更传统的东西。）
你可以像这样复制它：
if (myElement.parentNode instanceof Element) { myElement.parentElement = myElement.parentNode; } else { myElement.parentElement = null; }
就像nextSibling和nextElementSibling一样 ，只要记住，名称中带有“element”的属性总是返回Element或null 。 没有的属性可以返回任何其他types的节点。
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
使用.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>
