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

element-properties - Make "Types of children" section simpler

Browse Source
This commit is contained in:
bendtherules
2020-10-30 19:33:20 +05:30
parent 88238cbe85
commit 6b6f9c6dc9
1 changed files with 7 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/element-properties.mdx
+7 -9
View File
@@ -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 :::note Types of Children
All elements will *generally* have 2 types of children - 1. element and 2. text node. 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 ```jsx
<div> <div>
@@ -44,22 +44,20 @@ You can think of elements as other tags and text node as the text/content within
</div> </div>
``` ```
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 ```jsx
<div id="container"> <div id="container">
<div></div> <div></div>
</div> </div>
container.childNodes // [text, div, text] container.childNodes // [text, div, text]
// extra text nodes are created at start and end // extra text nodes contain newline and space characters
// 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). 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).
::: :::