diff --git a/docs/element-child-content.mdx b/docs/element-child-content.mdx
index 036d21f..59dad54 100644
--- a/docs/element-child-content.mdx
+++ b/docs/element-child-content.mdx
@@ -34,20 +34,49 @@ Text nodes are not elements, so they don't have any tagName. To identify the typ
-### 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
+
+
+ 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 // ...
+newEle.parentElement // ...
+
+//In case of appending to a document fragment, say, df
+df.append(newEle)
+newEle.parentNode // document-fragment
+newEle.parentElement // null
+
+```
+
+
+
+
+
+
+
## 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.
```
:::
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 14c8d25..9b32aa7 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -1,6 +1,6 @@
module.exports = {
title: 'UI Questions',
- tagline: 'Review all frontend topics before a interview',
+ tagline: 'Review all frontend topics before an interview',
url: 'https://UiQuestions.com',
baseUrl: '/',
onBrokenLinks: 'throw',