Difference between DOM parentNode and parentElement

Question

Can somebody in explain me in as simple as possible terms  what is the difference between classical DOM parentNode and newly introduced in Firefox 9 parentElement

User · Answer

Use  parentElement and you can t go wrong as long as you aren t using document fragments   If you use document fragments  then you need  parentNode   let div   document createDocumentFragment   appendChild document createElement  div     div parentElement    null div parentNode    document fragment   Also    x000D   x000D  let div   document getElementById  t   content firstChild x000D  div parentElement    null x000D  div parentNode    document fragment x000D   lt template id  t  gt  lt div gt  lt  div gt  lt  template gt  x000D   x000D   x000D      Apparently the  lt html gt  s  parentNode links to the Document  This should be considered a decision phail as documents aren t nodes since nodes are defined to be containable by documents and documents can t be contained by documents

User · Answer

Just like with nextSibling and nextElementSibling  just remember that  properties with  element  in their name always returns Element or null  Properties without can return any other kind of node   console log document body parentNode   is body s parent node          returns  lt html gt  console log document body parentElement   is body s parent element       returns  lt html gt   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

User · Answer

In Internet Explorer  parentElement is undefined for SVG elements  whereas parentNode is defined

User · Answer

parentElement is new to Firefox 9 and to DOM4  but it has been present in all other major browsers for ages   In most cases  it is the same as parentNode  The only difference comes when a node s parentNode is not an element  If so  parentElement is null   As an example   document body parentNode     the  lt html gt  element document body parentElement     the  lt html gt  element  document documentElement parentNode     the document node document documentElement parentElement     null   document documentElement parentNode     document       true  document documentElement parentElement     document       false   Since the  lt html gt  element  document documentElement  doesn t have a parent that is an element  parentElement is null   There are other  more unlikely  cases where parentElement could be null  but you ll probably never come across them

User · Answer

there is one more difference  but only in internet explorer  It occurs when you mix HTML and SVG  if the parent is the  other  of those two  then  parentNode gives the parent  while  parentElement gives undefined

[javascript] Difference between DOM parentNode and parentElement

Examples related to javascript

Examples related to firefox

Examples related to dom