Difference between DOM parentNode and parentElement

by

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

Since the <html> 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.)

More Related Contents:

  1. How can I tell if a DOM element is visible in the current viewport?
  2. How do I programmatically click on an element in JavaScript?
  3. DOM refresh on long running function
  4. Accessing the content of other tabs in a browser
  5. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  6. Executing elements inserted with .innerHTML
  7. How to stop event propagation with inline onclick attribute?
  8. document.createElement(“script”) synchronously
  9. Firing event on DOM attribute change
  10. How to expose IFrame’s DOM using jQuery?
  11. How can I simulate a click to an anchor tag?
  12. How To Wrap / Surround Highlighted Text With An Element
  13. Finding line-wraps
  14. Get child node index
  15. Getting value of HTML Checkbox from onclick/onchange events
  16. How to access component methods from “outside” in ReactJS?
  17. Why is document.all falsy?
  18. Get the DOM path of the clicked
  19. How can I detect browser type using jQuery?
  20. Console shows error about Content Security policy and lots of failed GET requests
  21. how to compare two elements in jquery [duplicate]
  22. Firefox 4 onBeforeUnload custom message
  23. forEach method of Node.childNodes?
  24. window.getSelection() of textarea not working in firefox?
  25. Getting HTML elements by their attribute names
  26. Display DIV at Cursor Position in Textarea [duplicate]
  27. Get immediate first child element
  28. Web browser: Hide mouse cursor [duplicate]
  29. How can I replace one class with another on all elements, using just the DOM?
  30. Dynamically generated table – using an array to fill in TD values

Leave a Comment