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

Merge branch '4-element-properties' of https://github.com/bendtherules/UiQuestions into 4-element-properties

Browse Source
This commit is contained in:
bendtherules
2020-11-08 13:18:50 +05:30
parent 5b498bc738 c9e4f343c5
commit f1c96b5608
1 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/element-properties.mdx
+9 -8
View File
@@ -12,7 +12,7 @@ import MDN from "../components/MDNBadge"
`Element.tagName: string` `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 `<div/>` element is `"DIV"`. Ex. `.tagName` of `<div/>` element is `"DIV"`.
@@ -24,7 +24,7 @@ someImage.tagName // "IMG"
:::note Text nodes don't have `tagName` :::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` `Node.parentElement: Element | null`
This property returns **the parent element** of the current node. If there is no parent, it returns 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 ```js
<div id="parent"> <div id="parent">
@@ -53,7 +53,8 @@ child.parentElement // <div id="parent>...</div>"
:::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 - an element or a text node.
You can think of elements as other tags and text node as the text within it. You can think of elements as other tags and text node as the text within it.
```jsx ```jsx
@@ -131,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. 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 also has a `.length` property. `NodeList` can be converted to an array easily, 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. Here, the NodeList is **live** - so the content of NodeList will auto-update.
```jsx ```jsx
@@ -176,10 +177,10 @@ This property returns the node immediately **after the current one** in their pa
<div id="C"/> <div id="C"/>
</div> </div>
var eleA = document.getElementByID("A") let eleA = document.getElementById("A")
var eleB = eleA.firstChild // <div id="B"> let eleB = eleA.firstChild // <div id="B">
var eleC = eleB.nextSibling // <div id="C"/> let eleC = eleB.nextSibling // <div id="C"/>
eleC.nextSibling // null eleC.nextSibling // null
``` ```