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
let 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)
```
:::
## Content
### 6. innerText
`Element.innerText: string [= value]`
Returns the **text content** of the element and its descendants **"as rendered"**.
Can be set, to **replace the element's children** with the given string. It creates a *text node* for every normal text range, but replaces each line break with a `
` element.
**Example 1 -**
`.innerText` tries to return a string which represents the actual visible text, not the text literally written in html.
Note how <br/> tags and the css have a effect on the output -
```jsx
Some text
then a newline
and another.
console.log(text.innerText)
// SOME TEXT
// THEN A NEWLINE
// AND ANOTHER.
```
On the other hand, `node.textContent` concatenates the actual text nodes used in the html and returns that string.
```jsx
console.log(text.textContent)
// Some text then a newlineand another.
```
**Example 2 -**
As setter, it replaces `\n` and `\r\n` in the input string with <br/> tags and wraps the rest in text nodes.
```jsx
text.innerText = "new text \n and a newline"
// NodeList(3) [
// text "new text ",
// br,
// text " and a newline."
// ]
// result html -
new text
and a newline
```
### 7. innerHTML
`Element.innerHTML: string [= value]`
Returns the **html markup contained within the element** as a string.
Can be set, to replace the **contents of the element with nodes parsed** from the given string. The existing content will be removed.
:::note To insert instead of replace
To **insert** the html into the element rather than replacing it, read about the method [`insertAdjacentHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML).
:::
**Example 1-**
```jsx
console.log(parent.innerHTML)
//
text1
//
text2
```
**Example 2-**
```jsx
parent.innerHTML = `
text1
text2
`
// result html-
```
To clear the content of any element, you can use `ele.innerHTML = ""`.
### 8. outerHTML
`Element.outerHTML: string [= value]`
Returns the html markup of the **element and its contents** as a string.
Can be set, to **replace the element** itself with nodes parsed from the given string.
**Example 1-**
```jsx
console.log(parent.outerHTML)
//
```
**Example 2-**
Replacing `parent2` with 2 new nodes -
```jsx
parent2.outerHTML = `
child 1
child 2
`
// result html-
```
someImage.tagName // "IMG"
```
:::note Text nodes don't have `tagName`
Text nodes are not elements, 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`.
:::