diff --git a/docs/create-modify-element.mdx b/docs/create-modify-element.mdx index 819394e..8568aa3 100644 --- a/docs/create-modify-element.mdx +++ b/docs/create-modify-element.mdx @@ -13,11 +13,11 @@ import MDN from "../components/MDNBadge" ### 1. querySelector() +`document.querySelector(selector) : Element | null` + This method returns the **first element that matches the CSS selector**. If no match is found, it returns `null`. ```js -document.querySelector(selector); - //
document.querySelector(".box"); // returns .box document.querySelector(".not-found"); // null @@ -25,7 +25,7 @@ document.querySelector(".not-found"); // null - This method is also available on all DOM nodes. If you want to look within a specific element, this is very useful. + This method is also available on all DOM nodes. If you want to look within a specific element, just use `ele.querySelector()` on the parent element. ```js // Example - .outer > .inner @@ -40,6 +40,8 @@ document.querySelector(".not-found"); // null ### 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. @@ -90,10 +92,10 @@ document.createElement("div") ### 4. setAttribute() -It sets a attribute on the current element. - `Element.setAttribute(name, value)` +It sets a attribute on the current element. + `name` - name of the attribute to add. Ex- "type". `value` - value of the attribute. Ex- "text". @@ -108,10 +110,10 @@ ele.setAttribute("type", "text") ### 5. appendChild() -It inserts a new element as the last child of the parent element. - `Element.appendChild(newElement)` +It inserts a new element as the last child of the parent element. + ```js var eleDiv = document.createElement("div") var eleH1 = document.createElement("h1")