element-properties - Add tagName and types of children

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 `<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 - 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
+<div>
+  This is  // <- 1. text node
+  <span>   // <- 2. element
+    some text // 2.1. <span> contains text node
+  </span>
+</div>
+```
+
+More importantly, if you are writing html by hand - it'll often introduce **invisible text nodes** which has only whitespace in it. Example -
+```jsx
+<div id="container">
+  <div></div>
+</div>
+
+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).
+:::
+
+<!-- ## Content - html, text
+
 ## Traversal (and ientification)
 
 ## Attribute, class, id, data
 
-## Scroll
-
-## Content - html, text
+## Scroll -->