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
-child.parentElement //
+ + + 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',