DOM Traversal
- parentNode – Returns parent node
- parentElement – Returns parent element node
- childNodes – Returns collection of an element’s child nodes (including text and comment nodes)
- children – Returns a collection of an element’s child element node (do not include text and comment nodes)
- firstChild – Returns first child node of an element (it can be text or comment node)
- firstElementChild – Returns first child element node of an element
- lastChild – Returns last child node of an element (it can be text or comment node)
- lastElementChild – Returns last child element node of an element
- previousSibling – Returns previous node of the same level (it can be text or comment node)
- previousElementSibling – Returns previous element node of the same level
- nextSibling – Returns next node of same level (it can be text or comment node)
- nextElementSibling – Returns next element of same level
parentNode and parentElement
The parentNode read-only property returns the parent of the specified node in the DOM tree.
The parentElement property returns the parent element of the specified element. If the parent node is not an element node, it returns null.
childNodes
The childNodes read-only property returns a live NodeList of child nodes of the given element where the first child node is assigned index 0. childNodes includes all child nodes, including non-element nodes like text and comment nodes.
- Whitespace inside elements is considered as text, and text is considered as nodes.
- Any whitespace will create a #text node, from a single space to multiple spaces, returns, tabs, and so on.
- You can use the length property of the NodeList object to determine the number of child nodes, then you can loop through all child nodes and extract the other info.
children
The children property returns collection of child elements of the given element where the first child is assigned index 0. children include only element nodes (no whitespace, text node, and comment node).
- You can use the length property of the NodeList object to determine the number of child nodes, then you can loop through all child nodes and extract the other info.
firstChild
The firstChild property returns the node’s first child in the tree, or null if the node has no children. If the node is a Document, it returns the first node in the list of its direct children. It includes a text node and a comment node.
- Whitespace inside elements is considered as text, and text is considered as nodes.
- Any whitespace will create a #text node, from a single space to multiple spaces, returns, tabs, and so on.
firstElementChild
The firstElementChild property returns the element’s first child element node in the tree, or null if the node has no children element. It ignores text node and comment node or any whitespaces.
lastChild
The lastChild read-only property returns the last child of the node. If its parent is an element, then the child is generally an element node, a text node, or a comment node. It returns null if there are no child elements.
- Whitespace inside elements is considered as text, and text is considered as nodes.
- Any whitespace will create a #text node, from a single space to multiple spaces, returns, tabs, and so on.
lastElementChild
The lastElementChild property returns the element’s last child element node in the tree, or null if the node has no children element. It ignores text node and comment node or any whitespaces.
previousSibling
The previousSibling read-only property returns the node immediately preceding the specified one in its parent’s childNodes list, or null if the specified node is the first in that list. It includes text node and comment node or any whitespace.
previousElementSibling
The previousElementSibling property returns the element node immediately preceding the specified one in its parent’s node list, or null if the specified node is the first in that list. It ignores the text node and comment node or any whitespace.
nextSibling
The nextSibling read-only property returns the node immediately following the specified one in its parent’s childNodes list, or null if the specified node is the last node in that list. It includes text node and comment node or any whitespace.
nextElementSibling
The nextElementSibling read-only property returns the element node immediately following the specified one in its parent’s node list, or null if the specified node is the last node in that list. It ignores the text node and comment node or any whitespace.
ownerDocument
The ownerDocument read-only property returns the top-level document object for this node. In HTML, the HTML document itself is always the ownerDocument of an element.
