From 88238cbe85089bd524937a703f791789c30aa831 Mon Sep 17 00:00:00 2001 From: bendtherules Date: Fri, 30 Oct 2020 14:01:50 +0530 Subject: [PATCH 01/34] element-properties - Add `tagName` and types of children --- docs/element-properties.mdx | 68 ++++++++++++++++++++++++++++++++++--- 1 file changed, 64 insertions(+), 4 deletions(-) diff --git a/docs/element-properties.mdx b/docs/element-properties.mdx index cbe470a..67f14f2 100644 --- a/docs/element-properties.mdx +++ b/docs/element-properties.mdx @@ -1,12 +1,72 @@ --- id: element-properties -title: Properties of DOM nodes +title: Element attributes and properties --- +import Admonition from "../components/Admonition" +import Accordion from "../components/Accordion" +import InternalLink from "../components/InternalLink" +import MDN from "../components/MDNBadge" + +### 1. tagName + +`Element.tagName : string` + +`.tagName` is a read-only property on any element, which returns the tag name in uppercase form. This is useful to identify type of a element. + +Ex. For a `
` element, tagName is `"DIV"`. + +```js +ele = document.querySelector("img"); +ele.tagName // "IMG" +``` + +:::note Text nodes don't have `tagName` + +Text nodes are not element, so they don't have any tagName - it'll just give `undefined`. + +::: + + +## Children and Content + +:::note Types of Children + +All elements will *generally* have 2 types of children - 1. element and 2. text node. +You can think of elements as other tags and text node as the text/content within a tag. + +```jsx +
+ This is // <- 1. text node + // <- 2. element + some text // 2.1. contains text node + +
+``` + +More importantly, if you are writing html by hand - it'll often introduce **invisible text nodes** which has only whitespace in it. Example - +```jsx +
+
+
+ +container.childNodes // [text, div, text] +// extra text nodes are created at start and end +// which only contains newline and space characters +``` + +If you recall, *Element* extends from *Node* - so all elements are nodes. That means, every child is technically a node. +This is important because some properties/methods return **only those child nodes which are element**, whereas others **return all child nodes** (both element and text node). 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 have invisible text nodes due to spaces and newline characters. + +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). +::: + + From 6b6f9c6dc9eeec5238b0a2babe04dfd280304099 Mon Sep 17 00:00:00 2001 From: bendtherules Date: Fri, 30 Oct 2020 19:33:20 +0530 Subject: [PATCH 02/34] element-properties - Make "Types of children" section simpler --- docs/element-properties.mdx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/docs/element-properties.mdx b/docs/element-properties.mdx index 67f14f2..beeb6f0 100644 --- a/docs/element-properties.mdx +++ b/docs/element-properties.mdx @@ -33,7 +33,7 @@ Text nodes are not element, so they don't have any tagName - it'll just give `un :::note Types of Children All elements will *generally* have 2 types of children - 1. element and 2. text node. -You can think of elements as other tags and text node as the text/content within a tag. +You can think of elements as other tags and text node as the text within a tag. ```jsx
@@ -44,22 +44,20 @@ You can think of elements as other tags and text node as the text/content within
``` -More importantly, if you are writing html by hand - it'll often introduce **invisible text nodes** which has only whitespace in it. Example - +If you recall, *Element* extends from *Node* - so all elements are nodes. That means, every child is technically a node. +This is important because some properties return **only child elements**, whereas others return **all child nodes** (both element and text node). 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 are created at start and end -// which only contains newline and space characters +// extra text nodes contain newline and space characters ``` -If you recall, *Element* extends from *Node* - so all elements are nodes. That means, every child is technically a node. -This is important because some properties/methods return **only those child nodes which are element**, whereas others **return all child nodes** (both element and text node). 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 have invisible text nodes due to spaces and newline characters. - 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). ::: From 227a9f97815d3ba7f5a4ee6182ffc82c93e3eab8 Mon Sep 17 00:00:00 2001 From: bendtherules Date: Fri, 30 Oct 2020 19:44:30 +0530 Subject: [PATCH 03/34] element-properties - Clarify tagName for text nodes --- docs/element-properties.mdx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/element-properties.mdx b/docs/element-properties.mdx index beeb6f0..c708ca0 100644 --- a/docs/element-properties.mdx +++ b/docs/element-properties.mdx @@ -23,12 +23,14 @@ ele.tagName // "IMG" :::note Text nodes don't have `tagName` -Text nodes are not element, so they don't have any tagName - it'll just give `undefined`. +Text nodes are not element, so they don't have any tagName. +To identify the type of node, use `.nodeType` - which returns `3` (same as `Node.TEXT_NODE`) for text nodes. + ::: -## Children and Content +## Children :::note Types of Children @@ -55,7 +57,7 @@ This is important because some properties return **only child elements**, wherea
container.childNodes // [text, div, text] -// extra text nodes contain newline and space characters +// 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). From 4d0fc815130d8949b748648768dec793ac66037b Mon Sep 17 00:00:00 2001 From: bendtherules Date: Fri, 30 Oct 2020 20:46:03 +0530 Subject: [PATCH 04/34] element-properties - Add `.children` property section --- docs/element-properties.mdx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/docs/element-properties.mdx b/docs/element-properties.mdx index c708ca0..322877f 100644 --- a/docs/element-properties.mdx +++ b/docs/element-properties.mdx @@ -63,6 +63,18 @@ container.childNodes // [text, div, text] 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). ::: +### 2. .children + +`Element.children: HTMLCollection` + +This read-only property returns a live `HTMLCollection` containing all the **child elements** of the node. If there are no child elements, it returns empty HTMLCollection. + +This property is available on `Document`, `Element`, and `DocumentFragment`, but not on text node. + +`HTMLCollection` can be consumed easily by converting it to an array, using `Array.from()` or `[...ele.children]`. It also has a `.length` property. +Here, the HTMLCollection is **live** - meaning if new child elements are added, they will automatically appear in this collection. + + From e69f0bff69ab895e9f7591682dbcffada124e34a Mon Sep 17 00:00:00 2001 From: bendtherules Date: Sat, 7 Nov 2020 14:00:41 +0530 Subject: [PATCH 18/34] element-properties - Make desc crisper --- docs/element-properties.mdx | 53 +++++++++++++++++-------------------- 1 file changed, 25 insertions(+), 28 deletions(-) diff --git a/docs/element-properties.mdx b/docs/element-properties.mdx index 86e1613..bfd5c44 100644 --- a/docs/element-properties.mdx +++ b/docs/element-properties.mdx @@ -12,13 +12,14 @@ import MDN from "../components/MDNBadge" `Element.tagName: string` -`.tagName` is a read-only property on any element, which returns the tag name in uppercase form. This is useful to identify type of a element. +This property returns the **tag name** of any element in uppercase form. This is useful to identify type of a element. -Ex. For a `
` element, tagName is `"DIV"`. +Ex. tagName of `
` element is `"DIV"`. ```js -ele = document.querySelector("img"); -ele.tagName // "IMG" + + +someImage.tagName // "IMG" ``` :::note Text nodes don't have `tagName` @@ -37,9 +38,8 @@ Text nodes are not element, so they don't have any tagName. To identify the type `Node.parentElement: Element | null` -`.parentElement` property returns **the parent element** of the current node. If the node doesn't have a parent, it returns null. - -Usually, the last parent will be `document` - which itself doesn't have a parent. +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
@@ -54,19 +54,20 @@ child.parentElement //
This is // <- 1. text node // <- 2. element - some text // 2.1. contains text node + some text // 2.1. text node
``` -If you recall, *Element* extends from *Node* - so all elements are nodes. That means, every child is technically a node. -This is important because some properties return **only child elements**, whereas others return **all child nodes** (both element and text node). For ex, `ele.childNodes` returns all child nodes, but `ele.children` returns only child elements. +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. @@ -86,11 +87,9 @@ Read more about [other types of nodes](https://developer.mozilla.org/en-US/docs/ `Element.children: HTMLCollection` -This read-only property returns a live `HTMLCollection` containing all the **child elements** of the node. If there are no child elements, it returns empty 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. -This property is available on `Document`, `Element`, and `DocumentFragment`, but not on text node. - -`HTMLCollection` can be consumed easily by converting it to an array, using `Array.from()` or `[...ele.children]`. HTMLCollection is also a iterable and has a `.length` property. +`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 @@ -114,12 +113,12 @@ for (let i = 0; i < children.length; i++) { ``` +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. +It returns the **number of child elements** of the given element. This is equivalent to `ele.children.length` value. ::: @@ -130,12 +129,10 @@ This is equivalent to `ele.children.length` value. `Node.childNodes: NodeList` -This read-only property returns a live `NodeList` containing all the **child nodes** of the current element, including text nodes. If there are no child nodes, it returns a empty NodeList. - -This property is available on all types of `Node` - like Element, text node, etc. +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**. +Here, the NodeList is **live** - so the content of NodeList will auto-update. ```jsx
@@ -144,7 +141,7 @@ Here, the NodeList is **live**. and more text
-const childNodes = parent.childNodes; +const {childNodes} = parent; childNodes // NodeList [text, span, text] [...childNodes].forEach(node => { @@ -152,12 +149,12 @@ childNodes // NodeList [text, span, text] }) ``` -:::note Is there any child node? +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`. +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`. ::: @@ -167,7 +164,7 @@ This is equivalent to checking `node.childNodes.length > 0`. `Element.firstChild: Node` -This property returns the element's **first child** node in the tree. If the node has no children, then it returns `null`. +This property returns the element's **first child** node in the tree. If there is no children, it returns `null`. `Element.nextSibling: Node` From 6db114a326b0d2b2b2b7bd452aaebf19a66b990f Mon Sep 17 00:00:00 2001 From: bendtherules Date: Sat, 7 Nov 2020 17:20:21 +0530 Subject: [PATCH 19/34] element-properties - clarify .tagName --- docs/element-properties.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/element-properties.mdx b/docs/element-properties.mdx index bfd5c44..1132153 100644 --- a/docs/element-properties.mdx +++ b/docs/element-properties.mdx @@ -12,9 +12,9 @@ import MDN from "../components/MDNBadge" `Element.tagName: string` -This property returns the **tag name** of any element in uppercase form. This is useful to identify type of a element. +This read-only property on any element returns the **tag name** in uppercase form. This is useful to identify type of a element. -Ex. tagName of `
` element is `"DIV"`. +Ex. `.tagName` of `
` element is `"DIV"`. ```js From 2d0ce2c5e5d2998f92f67212d6d4ae24e1082b5a Mon Sep 17 00:00:00 2001 From: bendtherules Date: Sat, 7 Nov 2020 17:22:48 +0530 Subject: [PATCH 20/34] element-properties - Shorteen NodeeList eextra text --- docs/element-properties.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/element-properties.mdx b/docs/element-properties.mdx index 1132153..9af2454 100644 --- a/docs/element-properties.mdx +++ b/docs/element-properties.mdx @@ -131,7 +131,7 @@ It returns the **number of child elements** of the given element. This is equiva 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. +`NodeList` can be converted to an array easily, using `Array.from()` or `[...ele.children]`. NodeList also has a `.length` property. Here, the NodeList is **live** - so the content of NodeList will auto-update. ```jsx From c9e4f343c508f89ed825268a42162897cdbe4c6a Mon Sep 17 00:00:00 2001 From: Lakshya Thakur Date: Sat, 7 Nov 2020 18:05:10 +0530 Subject: [PATCH 21/34] Cleanup --- docs/element-properties.mdx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/docs/element-properties.mdx b/docs/element-properties.mdx index 9af2454..b44a2b2 100644 --- a/docs/element-properties.mdx +++ b/docs/element-properties.mdx @@ -12,7 +12,7 @@ import MDN from "../components/MDNBadge" `Element.tagName: string` -This read-only property on any element returns the **tag name** in uppercase form. This is useful to identify type of a element. +This read-only property on any element returns the **tag name** in uppercase form. This is useful to identify type of an element. Ex. `.tagName` of `
` element is `"DIV"`. @@ -24,7 +24,7 @@ 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`. +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`. ::: @@ -39,7 +39,7 @@ Text nodes are not element, so they don't have any tagName. To identify the type `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. +The topmost parent element in DOM is `document`. You can use this to check if an element is detached from dom. ```js
@@ -53,7 +53,8 @@ child.parentElement //
-var eleA = document.getElementByID("A") +let eleA = document.getElementById("A") -var eleB = eleA.firstChild //
-var eleC = eleB.nextSibling //
+let eleB = eleA.firstChild //
+let eleC = eleB.nextSibling //
eleC.nextSibling // null ``` From 5b498bc738f9acc7cbafb63c7b47a18a5c86f155 Mon Sep 17 00:00:00 2001 From: bendtherules Date: Sun, 8 Nov 2020 13:18:47 +0530 Subject: [PATCH 22/34] element-properties - Add .innerText section --- docs/element-properties.mdx | 51 ++++++++++++++++++++++++++++++++++--- 1 file changed, 48 insertions(+), 3 deletions(-) diff --git a/docs/element-properties.mdx b/docs/element-properties.mdx index 9af2454..9f582bf 100644 --- a/docs/element-properties.mdx +++ b/docs/element-properties.mdx @@ -229,8 +229,53 @@ traverse(root.firstChild) - +`Element.innerText: string [= value]` + +Returns the element's **text content "as rendered"**. + +Can be set, to **replace the element's children** with the given string. +It adds a *text node* for the normal text ranges, but replaces line breaks with `
` elements. + + +**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 +``` From 6fe7a85cd23ac19eb7cf4096df9f3c0d97c8cafc Mon Sep 17 00:00:00 2001 From: bendtherules Date: Sun, 8 Nov 2020 13:22:00 +0530 Subject: [PATCH 23/34] element-properties - Add MDN links for .innerText --- docs/element-properties.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/element-properties.mdx b/docs/element-properties.mdx index 910f449..476731b 100644 --- a/docs/element-properties.mdx +++ b/docs/element-properties.mdx @@ -280,3 +280,9 @@ text.innerText = "new text \n and a newline" // result html - new text
and a newline ``` + + +   + +   + From 21cfb547f9dae03b32ee9704a677aafb2c3f1916 Mon Sep 17 00:00:00 2001 From: bendtherules Date: Sun, 8 Nov 2020 13:30:01 +0530 Subject: [PATCH 24/34] element-properties - Clarify desc for .innerText --- docs/element-properties.mdx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/element-properties.mdx b/docs/element-properties.mdx index 476731b..1762383 100644 --- a/docs/element-properties.mdx +++ b/docs/element-properties.mdx @@ -236,10 +236,9 @@ traverse(root.firstChild) `Element.innerText: string [= value]` -Returns the element's **text content "as rendered"**. +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 adds a *text node* for the normal text ranges, but replaces line breaks with `
` elements. +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 -** From 7cb4ba9bd2e0e38510cb032cb25a13f7647bee29 Mon Sep 17 00:00:00 2001 From: bendtherules Date: Sun, 8 Nov 2020 18:09:54 +0530 Subject: [PATCH 25/34] element-properties - Add section for innerHTML and outerHTML --- docs/element-properties.mdx | 92 +++++++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) diff --git a/docs/element-properties.mdx b/docs/element-properties.mdx index 1762383..a60cfe4 100644 --- a/docs/element-properties.mdx +++ b/docs/element-properties.mdx @@ -285,3 +285,95 @@ text.innerText = "new text \n 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 +
+
text1
+
text2
+
+ +console.log(parent.innerHTML) +//
text1
+//
text2
+``` + +**Example 2-** +```jsx +
+ +parent.innerHTML = ` +
text1
+
text2
+` + +// result html- +
+
text1
+
text2
+
+``` + +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 +
+
text1
+
+ +console.log(parent.outerHTML) +//
+//
text1
+//
+``` + +**Example 2-** + +Replacing `parent2` with 2 new nodes - + +```jsx +
+
parent 2
+
parent 3
+
+ +parent2.outerHTML = ` +
child 1
+
child 2
+` + +// result html- +
+
child 1
+
child 2
+
parent 3
+
+``` + + + From 44f1bfcf4260cd89565bea9d6f2aba31beea83a5 Mon Sep 17 00:00:00 2001 From: bendtherules Date: Sun, 8 Nov 2020 18:23:00 +0530 Subject: [PATCH 26/34] element-properties - Rename file and id Changes - 1. id - From "element-properties" to "element-child-content". Changed in file and sidebar.js 2. rename file - from "element-properties.mdx" to "element-child-content.mdx" --- docs/{element-properties.mdx => element-child-content.mdx} | 4 ++-- sidebars.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename docs/{element-properties.mdx => element-child-content.mdx} (99%) diff --git a/docs/element-properties.mdx b/docs/element-child-content.mdx similarity index 99% rename from docs/element-properties.mdx rename to docs/element-child-content.mdx index a60cfe4..a3cc009 100644 --- a/docs/element-properties.mdx +++ b/docs/element-child-content.mdx @@ -1,6 +1,6 @@ --- -id: element-properties -title: Element attributes and properties +id: element-child-content +title: Element properties - Child and Content --- import Admonition from "../components/Admonition" diff --git a/sidebars.js b/sidebars.js index 645dbcc..d7df4b6 100644 --- a/sidebars.js +++ b/sidebars.js @@ -2,7 +2,7 @@ module.exports = { "Quick Guide": { "DOM and Events": [ "create-modify-element", - 'element-properties', + 'element-child-content', 'element-position-scroll', ], From 4d96f4f5bfca3970e1bf363f09086f5328d0bb05 Mon Sep 17 00:00:00 2001 From: bendtherules Date: Sun, 8 Nov 2020 18:24:03 +0530 Subject: [PATCH 27/34] create-modify-element - Rename title to "Basic ..." without changing sidebar_label --- docs/create-modify-element.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/create-modify-element.mdx b/docs/create-modify-element.mdx index a8f5f0b..c733c1b 100644 --- a/docs/create-modify-element.mdx +++ b/docs/create-modify-element.mdx @@ -1,7 +1,7 @@ --- id: create-modify-element -# sidebar_label: DOM Manipulation -title: DOM Manipulation +sidebar_label: DOM Manipulation +title: Basic DOM Manipulation slug: / --- From 29493b0348457798df549c985b2f4144e7374565 Mon Sep 17 00:00:00 2001 From: bendtherules Date: Sun, 8 Nov 2020 18:31:27 +0530 Subject: [PATCH 28/34] Simiplify sidebar structure for DOM Manipulation I have called this whole section as "DOM manipulation" (instead of DOM and events), so all the sub-files can be named easily with that context, without prefixing with "element-" or "DOM". Renamed "DOM manipulation" page title to "Creating elements", then shortended title for "Child and Content" file by removing prefix. --- docs/create-modify-element.mdx | 3 +-- docs/element-child-content.mdx | 2 +- sidebars.js | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/docs/create-modify-element.mdx b/docs/create-modify-element.mdx index c733c1b..cdd3301 100644 --- a/docs/create-modify-element.mdx +++ b/docs/create-modify-element.mdx @@ -1,7 +1,6 @@ --- id: create-modify-element -sidebar_label: DOM Manipulation -title: Basic DOM Manipulation +title: Creating elements slug: / --- diff --git a/docs/element-child-content.mdx b/docs/element-child-content.mdx index a3cc009..05028cd 100644 --- a/docs/element-child-content.mdx +++ b/docs/element-child-content.mdx @@ -1,6 +1,6 @@ --- id: element-child-content -title: Element properties - Child and Content +title: Child and Content --- import Admonition from "../components/Admonition" diff --git a/sidebars.js b/sidebars.js index d7df4b6..8a84af2 100644 --- a/sidebars.js +++ b/sidebars.js @@ -1,6 +1,6 @@ module.exports = { "Quick Guide": { - "DOM and Events": [ + "DOM Manipulation": [ "create-modify-element", 'element-child-content', 'element-position-scroll', From 89e5f490c7b2ab6167914850272ef4e0a1ac084c Mon Sep 17 00:00:00 2001 From: bendtherules Date: Sun, 8 Nov 2020 18:41:55 +0530 Subject: [PATCH 29/34] element-child-content - Clarify text and wrap some text in note --- docs/element-child-content.mdx | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/docs/element-child-content.mdx b/docs/element-child-content.mdx index 05028cd..96cb4fe 100644 --- a/docs/element-child-content.mdx +++ b/docs/element-child-content.mdx @@ -242,8 +242,7 @@ Can be set, to **replace the element's children** with the given string. It crea **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 - +`.innerText` tries to return a string which represents the actual visible text, not the text literally written in html. Notice how <br/> tags and the css affects the output - ```jsx Some text
then a newline
and another. @@ -255,13 +254,14 @@ console.log(text.innerText) // THEN A NEWLINE // AND ANOTHER. ``` - +:::note 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. @@ -270,14 +270,14 @@ As setter, it replaces `\n` and `\r\n` in the input string with <br/> tags text.innerText = "new text \n and a newline" -// NodeList(3) [ -// text "new text ", -// br, -// text " and a newline." + +text.childNodes +// NodeList [ +// text "new text ", br, text " and a newline." // ] // result html - -new text
and a newline +// new text
and a newline ``` @@ -294,12 +294,6 @@ 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
@@ -328,8 +322,12 @@ parent.innerHTML = `
``` +:::note To remove all children + To clear the content of any element, you can use `ele.innerHTML = ""`. +::: + ### 8. outerHTML From 539724e709986a466f7ab44c7f9ac888501a9d3b Mon Sep 17 00:00:00 2001 From: bendtherules Date: Sun, 8 Nov 2020 18:46:53 +0530 Subject: [PATCH 30/34] element-child-content - Shorten Nodelist usage --- docs/element-child-content.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/element-child-content.mdx b/docs/element-child-content.mdx index 96cb4fe..562ed7a 100644 --- a/docs/element-child-content.mdx +++ b/docs/element-child-content.mdx @@ -132,7 +132,7 @@ It returns the **number of child elements** of the given element. This is equiva 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 `[...node.childNodes]`. NodeList also has a `.length` property. +`NodeList` can be converted to a array using `Array.from()` or `[...node.childNodes]`. NodeList also has a `.length` property. Here, the NodeList is **live** - so the content of NodeList will auto-update. ```jsx From 05fa204900fe75c11bec48a7fe5a57e69aab5799 Mon Sep 17 00:00:00 2001 From: bendtherules Date: Sun, 8 Nov 2020 18:48:46 +0530 Subject: [PATCH 31/34] element-child-content - In notes, add space between code signature and desc --- docs/element-child-content.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/element-child-content.mdx b/docs/element-child-content.mdx index 562ed7a..036d21f 100644 --- a/docs/element-child-content.mdx +++ b/docs/element-child-content.mdx @@ -119,6 +119,7 @@ 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. ::: @@ -155,6 +156,7 @@ 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`. ::: From dea8bcafd83557105f10286fb56692807aca05e9 Mon Sep 17 00:00:00 2001 From: Lakshya Thakur Date: Mon, 9 Nov 2020 00:05:57 +0530 Subject: [PATCH 32/34] Added parentNode and minor cleanup --- docs/element-child-content.mdx | 47 +++++++++++++++++++++++++++------- docusaurus.config.js | 2 +- 2 files changed, 39 insertions(+), 10 deletions(-) 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', From d01a7b1bf13525521b7b21366772832a1491c870 Mon Sep 17 00:00:00 2001 From: bendtherules Date: Mon, 9 Nov 2020 00:54:39 +0530 Subject: [PATCH 33/34] element-child-content - Clarify parentNode and parentElement Also added correct info about topmost node and element. --- docs/element-child-content.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/element-child-content.mdx b/docs/element-child-content.mdx index 59dad54..cbfcdf5 100644 --- a/docs/element-child-content.mdx +++ b/docs/element-child-content.mdx @@ -38,7 +38,9 @@ Text nodes are not elements, so they don't have any tagName. To identify the typ `Node.parentNode: Element | Document | DocumentFragment | null` -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). +This property returns **the parent node** of the current node. If there is no parent, it returns null. In case of Document and DocumentFragment, `.parentNode` is always null. + +The topmost parentNode in DOM is `document`. This can be used to check if an element is detached from the DOM. ```js
@@ -52,7 +54,7 @@ child.parentNode //
Date: Mon, 9 Nov 2020 01:08:21 +0530 Subject: [PATCH 34/34] fix queue append --- docs/element-child-content.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/element-child-content.mdx b/docs/element-child-content.mdx index cbfcdf5..4e3c731 100644 --- a/docs/element-child-content.mdx +++ b/docs/element-child-content.mdx @@ -237,7 +237,7 @@ while (queue.length > 0) { const item = queue.shift(); console.log(item); if (item.hasChildNodes()) { - queue.push(Array.from(item.childNodes)); + queue = queue.concat([...item.childNodes]); } }