` element is `"DIV"`. ```js

someImage.tagName // "IMG" ``` :::note Text nodes don't have `tagName` Text nodes are not element, so they don't have any tagName. To identify the type of node, use `.nodeType` property. For text nodes, `nodeType` is `3` - same as the constant `Node.TEXT_NODE`. ::: ### 2. parentElement `Node.parentElement: Element | null` This property returns **the parent element** of the current node. If there is no parent, it returns null. The topmost parent element in DOM is `document`. You can use this to check if a element is detached from dom. ```js

child.parentElement //

This is // <- 1. text node // <- 2. element some text // 2.1. text node

``` If you recall, *Element* extends from *Node* - so element and text node are both actually Node. This is important because some properties return **only child elements**, whereas some return **all child nodes** (including text nodes). For ex, `ele.childNodes` returns all child nodes, but `ele.children` returns only child elements. **Always use the one which is more suitable for your case**. Remember, even if you haven't added any "text" between a tag, it can still have **invisible text nodes** due to spaces and newline characters. ```jsx

container.childNodes // [text, div, text] // extra text nodes contain newline and space ``` Read more about [other types of nodes](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType) and how [whitespace works in html](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace). ::: ### 3. children `Element.children: HTMLCollection` This property returns a live `HTMLCollection` containing all the **child elements** of the node. If there are no child elements, it returns empty HTMLCollection. `HTMLCollection` can be converted to an array using `Array.from()` or `[...ele.children]`. HTMLCollection also has a `.length` property. Here, the HTMLCollection is **live** - meaning if new child elements are added, they will automatically appear in this collection. ```jsx

Some text some element

const children = parent.children; children // HTMLCollection [span] // 1. For-loop using .length for (let i = 0; i < children.length; i++) { console.log(children[i].tagName); } // 2. Convert to array [...children].forEach(ele => { // do something }) ``` This property is also available on `Document` and `DocumentFragment`. :::note Counting number of child elements `Element.childElementCount: number` It returns the **number of child elements** of the given element. This is equivalent to `ele.children.length` value. ::: ### 4. childNodes `Node.childNodes: NodeList` This property returns a live `NodeList` containing all the **child nodes** of the current element. If there are no child nodes, it returns a empty NodeList. `NodeList` can be converted to an array easily, using `Array.from()` or `[...ele.children]`. NodeList is also a iterable and has a `.length` property. Here, the NodeList is **live** - so the content of NodeList will auto-update. ```jsx

Some text some element and more text

const {childNodes} = parent; childNodes // NodeList [text, span, text] [...childNodes].forEach(node => { // do something }) ``` This property is available on all types of `Node` - like Element, text node, etc. :::note Check if there is any child node `Node.hasChildNodes() : boolean` This method checks whether the given node **has child nodes or not** and returns a boolean value. This is equivalent to checking `node.childNodes.length > 0`. ::: ### 5. firstChild + nextSibling `Element.firstChild: Node` This property returns the element's **first child** node in the tree. If there is no children, it returns `null`. `Element.nextSibling: Node` This property returns the node immediately **after the current one** in their parent's childNodes. ```jsx

var eleA = document.getElementByID("A") var eleB = eleA.firstChild //

var eleC = eleB.nextSibling //

eleC.nextSibling // null ``` There is also a similar `previousSibling` property which returns the previous node. Also, there are element-only variants like `firstElementChild`, `nextElementSibling`, etc. :::note Easier traversal This allows accessing the DOM tree in [Left-child right-sibling](https://en.wikipedia.org/wiki/Left-child_right-sibling_binary_tree) (LCRS) form, which is more memory efficient for usual traversal. #### How do you implement **dom traversal**? The typical approach is to use a queue, push all children to the queue, pop them one-by-one and visit them. This requires **extra memory** because of the queue data structure which holds all the *next items to visit*. But with the LCRS form, you always have access to the next item **without using extra space**. If current element has child, visit `.firstChild`. Then visit next node using `.nextSibling`. ```js // 1. Typical approach var queue = [root] while (queue.length > 0) { const item = queue.shift(); console.log(item); if (item.hasChildNodes()) { queue = Array.from(item.childNodes).concat(queue) } } // 2. LCRS approach function traverse(item) { if (item === null) { return; } console.log(item); traverse(item.firstChild) traverse(item.nextSibling) } traverse(root.firstChild) ``` :::