bendtherules/UiQuestions
1
0
Fork 0
mirror of https://github.com/bendtherules/UiQuestions.git synced 2026-08-18 13:52:50 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Added parentNode and minor cleanup

Browse Source
This commit is contained in:
Lakshya Thakur
2020-11-09 00:05:57 +05:30
parent 05fa204900
commit dea8bcafd8
2 changed files with 39 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/element-child-content.mdx
+38 -9
View File
@@ -34,20 +34,49 @@ Text nodes are not elements, so they don't have any tagName. To identify the typ
<MDN title="nodeType" i url="https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType" />&nbsp;
</span>
### 2. parentElement
### 2. parentNode
`Node.parentElement: Element | null`
`Node.parentNode: Element | Document | DocumentFragment | 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 an element is detached from dom.
This property returns **the parent node** of the current node. If there is no parent, it returns null (which is always true in the case of Document and DocumentFragment).
```js
<div id="parent">
<div id="child"/>
</div>
child.parentElement // <div id="parent>...</div>"
child.parentNode // <div id="parent>...</div>
```
<Accordion title="Related">
<Admonition type="note" title="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 node in DOM is document. This can be used to check if an element is detached from DOM.
```js
let newEle = document.createElement("div");
newEle.parentNode // null
newEle.parentElement // null
// In case of appending to an element
document.body.append(newEle)
newEle.parentNode // <body>...</body>
newEle.parentElement // <body>...</body>
//In case of appending to a document fragment, say, df
df.append(newEle)
newEle.parentNode // document-fragment
newEle.parentElement // null
```
</Admonition>
</Accordion>
<span><MDN title="parentNode" url="https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode" /></span>
## Children
@@ -194,19 +223,19 @@ There is also a similar `previousSibling` property which returns the previous no
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**?
#### 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]
let queue = [root]
while (queue.length > 0) {
const item = queue.shift();
console.log(item);
if (item.hasChildNodes()) {
queue = Array.from(item.childNodes).concat(queue)
queue.push(Array.from(item.childNodes));
}
}
@@ -261,7 +290,7 @@ On the other hand, `node.textContent` concatenates the actual text nodes used in
```jsx
console.log(text.textContent)
// Some text then a newlineand another.
// Some text then a newline and another.
```
:::