mirror of
https://github.com/bendtherules/UiQuestions.git
synced 2026-08-18 22:02:42 +00:00
112 lines
3.6 KiB
Plaintext
112 lines
3.6 KiB
Plaintext
---
|
||
id: element-properties
|
||
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 `<div/>` 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.
|
||
To identify the type of node, use `.nodeType` - which returns `3` (same as `Node.TEXT_NODE`) for text nodes.
|
||
|
||
<MDN title="nodeType" url="https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType" />
|
||
:::
|
||
|
||
|
||
## Children
|
||
|
||
:::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 within a tag.
|
||
|
||
```jsx
|
||
<div>
|
||
This is // <- 1. text node
|
||
<span> // <- 2. element
|
||
some text // 2.1. <span> contains text node
|
||
</span>
|
||
</div>
|
||
```
|
||
|
||
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
|
||
<div id="container">
|
||
<div></div>
|
||
</div>
|
||
|
||
container.childNodes // [text, div, text]
|
||
// 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).
|
||
:::
|
||
|
||
### 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.
|
||
|
||
|
||
### 2. .childNodes
|
||
|
||
`Element.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 elements, it returns a empty NodeList.
|
||
|
||
This property is available on all types of `Node` - like Element, text node, etc.
|
||
|
||
`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**.
|
||
|
||
```jsx
|
||
<div id="parent">
|
||
Some text
|
||
<span>some element</span>
|
||
and more text
|
||
</div>
|
||
|
||
const childNodes = parent.childNodes;
|
||
childNodes // NodeList [text, span, text]
|
||
|
||
[...childNodes].forEach(node => {
|
||
// do something
|
||
})
|
||
```
|
||
|
||
|
||
<!-- ## Content - html, text
|
||
|
||
## Traversal (and ientification)
|
||
|
||
## Attribute, class, id, data
|
||
|
||
## Scroll -->
|