added Difference-between-querySelector-and-querySelectorAll

Author: Varunyadavgithub

Medium/Difference-between-querySelector-and-querySelectorAll.md

@@ -0,0 +1,119 @@
+### **What is the Difference Between `querySelector` and `querySelectorAll`**
+
+In JavaScript, the `querySelector` and `querySelectorAll` methods are used to select elements from the DOM (Document Object Model). While they may seem similar, they have distinct differences in how they work and the type of result they return.
+
+---
+
+## `querySelector`
+
+The `querySelector` method selects the **first element** that matches a specified CSS selector.
+
+### Characteristics of `querySelector`:
+
+1. **Single Element:** Always returns the first matching element.
+2. **Null if No Match:** Returns `null` if no element matches the selector.
+3. **Flexible Selector Syntax:** Supports CSS selector syntax.
+
+### Syntax:
+
+```javascript
+document.querySelector(selector);
+```
+
+### Example:
+
+```javascript
+// Selects the first <p> element
+const firstParagraph = document.querySelector("p");
+console.log(firstParagraph.textContent);
+
+// Selects the first element with the class 'highlight'
+const firstHighlight = document.querySelector(".highlight");
+console.log(firstHighlight.textContent);
+```
+
+---
+
+## `querySelectorAll`
+
+The `querySelectorAll` method selects **all elements** that match a specified CSS selector and returns a static NodeList.
+
+### Characteristics of `querySelectorAll`:
+
+1. **Multiple Elements:** Returns all matching elements.
+2. **Empty NodeList:** Returns an empty NodeList if no elements match the selector.
+3. **Iterable:** The returned NodeList can be iterated using loops or converted to an array.
+
+### Syntax:
+
+```javascript
+document.querySelectorAll(selector);
+```
+
+### Example:
+
+```javascript
+// Selects all <p> elements
+const allParagraphs = document.querySelectorAll("p");
+allParagraphs.forEach((p) => {
+  console.log(p.textContent);
+});
+
+// Selects all elements with the class 'highlight'
+const allHighlights = document.querySelectorAll(".highlight");
+console.log(allHighlights.length); // Prints the number of elements
+```
+
+---
+
+## Key Differences Between `querySelector` and `querySelectorAll`
+
+| **Aspect**             | **querySelector**            | **querySelectorAll**                   |
+| ---------------------- | ---------------------------- | -------------------------------------- |
+| **Return Type**        | Single Element (first match) | Static NodeList of all matches         |
+| **Number of Results**  | One                          | Zero or more                           |
+| **Return if No Match** | `null`                       | Empty NodeList                         |
+| **Iteration**          | Not directly iterable        | Iterable using `forEach` or `for...of` |
+
+---
+
+## Use Cases
+
+### When to Use `querySelector`:
+
+- Selecting a single, specific element from the DOM.
+- When you are sure only one element needs to be targeted (e.g., an ID selector).
+
+### When to Use `querySelectorAll`:
+
+- Selecting multiple elements that share a common CSS selector.
+- Applying the same logic or styling to multiple elements.
+
+---
+
+## Example Comparing Both
+
+```javascript
+// HTML Example:
+// <p class="highlight">First</p>
+// <p class="highlight">Second</p>
+
+// Using querySelector
+const firstHighlight = document.querySelector(".highlight");
+console.log(firstHighlight.textContent); // Output: "First"
+
+// Using querySelectorAll
+const allHighlights = document.querySelectorAll(".highlight");
+allHighlights.forEach((el) => console.log(el.textContent));
+// Output:
+// "First"
+// "Second"
+```
+
+---
+
+## Summary
+
+- **`querySelector`** is for selecting a single element (the first match).
+- **`querySelectorAll`** is for selecting multiple elements (all matches).
+- Both use CSS selectors for targeting elements, making them powerful and flexible tools for DOM manipulation.

Medium/README.md

@@ -10,7 +10,7 @@ This section contains intermediate-level JavaScript interview questions. Click o
 6.  [What are higher-order functions in JavaScript?](Higher-order-functions-in-JS.md) ✅
 7.  [What is a callback function in JavaScript?](Callback-functions-in-JS.md) ✅
 8.  [What is the difference between synchronous and asynchronous programming?](Difference-between-sync-and-async.md) ✅
-9.  [What is the difference between querySelector and querySelectorAll?](Difference-between-querySelector-and-querySelectorAll.md)
+9.  [What is the difference between querySelector and querySelectorAll?](Difference-between-querySelector-and-querySelectorAll.md) ✅
 10. [What is hoisting in JavaScript?](Hoisting-in-JS.md)
 11. [What are JavaScript promises, and how do they work?](Promises-in-JS.md)
 12. [What is the difference between function declaration and function expression?](Function-declaration-vs-expression.md)