document.querySelector(".box"); // returns .box document.querySelector(".not-found"); // null ``` Besides Document, this method is also available on Element and DocumentFragment.
If you want to look within a specific element, just use ele.querySelector() on the parent element.
If you want to look within a specific fragment, just use df.querySelector() on the parent fragment. ```js // Example - outer is a parent element/fragment. let innerEle = outer.querySelector(".inner"); ``` ### 2. querySelectorAll() `document.querySelectorAll(selector) : NodeList` This method returns **all the elements that match** the specified CSS selector. It returns a **static NodeList**, which contains the matching elements. If no match is found, it returns empty NodeList. :::note How to consume NodeList? NodeList is a iterable, so it can be iterated using `for..of` loop, or converted to a array using spread syntax like `[...nodelist]`. Here, the NodeList is static - meaning any changes in the DOM later does not affect the content of the existing collection. More about NodeList [here](https://developer.mozilla.org/en-US/docs/Web/API/NodeList). ::: ```js let paras = document.querySelectorAll("p"); for (let p of paras) { p.className = "note"; } ``` Besides Document, this method is also available on Element and DocumentFragment.
If you want to look for list of elements within specific element, just use ele.querySelectorAll() on the parent element.
If you want to look for list of elements within specific fragment, just use df.querySelectorAll() on the parent fragment. ```js // Example - outer is a parent element/fragment. let innerEles = outer.querySelectorAll(".inner"); ``` ## Create / insert element ### 3. createElement() `document.createElement(tagName) : Element` This method creates a new HTML element, taking the specified HTML tag name as argument. ```js document.createElement("div") // creates a

element ``` To add some text inside a element, you'll need to create a text node. `createTextNode` method takes a string as input and returns a new TextNode. ```js let ele = document.createElement("div") let newText = document.createTextNode("Hello world") ele.appendChild(newText) //

Hello world

``` ### 4. setAttribute() `Element.setAttribute(name, value)` This method sets an attribute on the current element. `name` - name of the attribute to add. Ex- "type". `value` - value of the attribute. Ex- "text". ```js let ele = document.createElement("input") ele.setAttribute("type", "text") // ``` ### 5. appendChild() `Node.appendChild(newNode)` This method inserts a new node as the last child of the parent node. ```js let eleDiv = document.createElement("div") let eleH1 = document.createElement("h1") eleDiv.appendChild(eleH1) //

``` If newNode is already a child of another node, then it is removed from its existing parent and then added to the new parent. If newNode is a DocumentFragment, then - instead of adding the fragment itself as a child, the entire content of the fragment is added as children of the parent node. There is a newer api called .append(), which is a superset of .appendChild().

⭐️ .append() allows you to insert multiple child elements in a single call. It also allows string as input, which gets converted to Text node. ```js ele1.append(ele2, ele3, 'hello world') ``` 💔 .appendChild() only allows inserting a single element at a time. ### 6. removeChild() `Node.removeChild(childNode)` This method tries to remove a child node from the parent and returns the removed node. If the node to be removed is not a child of the parent node, it throws a `NotFoundError` DOMException. ```js //

parentEle.removeChild(childEle) ``` ### 7. insertBefore() `Node.insertBefore(newEle, refEle)` This method inserts a new child node before another node within a parent. `newEle` - The node to be inserted. `refEle` - The reference node before which newEle should be inserted. If refEle is `null`, then newEle is added as the last child. ```js //

Apple
Zebra

// To add a new

above "Zebra" let parent = document.querySelector("ul") let ref = document.querySelector("li:last-child") let newEle = document.createElement("li") parent.insertBefore(newEle, ref) ``` :::note insertAfter() There is no `insertAfter()` method. It can be emulated by combining insertBefore method with ele.nextSibling. ```js parent.insertBefore(newEle, ref.nextSibling) ``` ::: ### 8. Document Fragment `document.createDocumentFragment() : DocumentFragment` This method is used to create a new empty document fragment. DocumentFragment can be considered to be a off-screen lightweight `document` object. It is generally used for batching multiple operations - by doing them in the fragment over time and then rendering the whole content to the visible DOM in one shot . Because fragment is not rendered, making changes to it doesn't cause any performance impact (no reflow). ```js let fragment = document.createDocumentFragment() // Insert / modify elements in fragment // in dom,

let outerEle = document.querySelector(".outer") outerEle.appendChild(fragment) // This will remove all content from fragment and // insert them within outerEle. // .appendChild()/.insertBefore() - can be used to move the whole content of the fragment to the actual DOM. ``` -------- In the next section, we'll see how to read information from a DOM element.