---
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 `` 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 within a tag.
```jsx
This is // <- 1. text node
// <- 2. element
some text // 2.1. contains 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.
**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 contain newline and space 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).
:::