# Selecting Elements Before JavaScript can read or modify any element on a page, it must first **select** that element from the DOM. JavaScript provides several methods on the `document` object to find elements — by ID, class, tag name, CSS selector, and more. --- ## 1. `getElementById` Selects a **single element** by its `id` attribute. Returns the element directly, or `null` if no element with that ID exists. **Syntax:** ```js const element = document.getElementById("id-name"); ``` **HTML:** ```html

Hello, World!

Welcome to JavaScript.

``` **JavaScript:** ```js const heading = document.getElementById("heading"); const intro = document.getElementById("intro"); console.log(heading); //

Hello, World!

console.log(heading.textContent); // Hello, World! console.log(intro.textContent); // Welcome to JavaScript. ``` **If no element is found:** ```js const missing = document.getElementById("nonexistent"); console.log(missing); // null ``` **Key points:** - IDs must be unique in a page — `getElementById` always returns at most one element. - The `#` symbol is not included — pass just the ID name as a string. - Returns `null` if not found, not `undefined`. --- ## 2. `getElementsByClassName` Selects **all elements** with a given class name. Returns an **HTMLCollection** — a live, array-like object. **Syntax:** ```js const elements = document.getElementsByClassName("class-name"); ``` **HTML:** ```html

First paragraph.

Second paragraph.

Third paragraph.

``` **JavaScript:** ```js const paragraphs = document.getElementsByClassName("text"); console.log(paragraphs.length); // 3 console.log(paragraphs[0].textContent); // First paragraph. // Loop through for (let i = 0; i < paragraphs.length; i++) { console.log(paragraphs[i].textContent); } ``` **HTMLCollection is live** — if elements are added or removed from the DOM, the collection updates automatically. ```js // Cannot use forEach directly — HTMLCollection is not an array paragraphs.forEach(p => console.log(p)); // TypeError // Convert to array first Array.from(paragraphs).forEach(p => console.log(p.textContent)); ``` --- ## 3. `getElementsByTagName` Selects **all elements** with a given HTML tag. Returns a live HTMLCollection. **Syntax:** ```js const elements = document.getElementsByTagName("tag"); ``` **JavaScript:** ```js const allParagraphs = document.getElementsByTagName("p"); const allDivs = document.getElementsByTagName("div"); const allElements = document.getElementsByTagName("*"); // every element on the page console.log(allParagraphs.length); console.log(allParagraphs[0].textContent); ``` --- ## 4. `querySelector` Selects the **first element** that matches a given CSS selector. Returns the element, or `null` if nothing matches. **Syntax:** ```js const element = document.querySelector("css-selector"); ``` This is the most flexible and modern selector method. Any valid CSS selector works — class, ID, tag, attribute, pseudo-class, combinator, and more. **HTML:** ```html

Hello

First

Second

Label

``` **JavaScript:** ```js // By ID const heading = document.querySelector("#heading"); // By class const firstText = document.querySelector(".text"); // only the FIRST match // By tag const firstP = document.querySelector("p"); // By attribute const input = document.querySelector("[type='text']"); // By combination const label = document.querySelector(".card .label"); const h1Title = document.querySelector("h1.title"); // By pseudo-class const firstLi = document.querySelector("ul li:first-child"); const lastLi = document.querySelector("ul li:last-child"); console.log(heading.textContent); // Hello console.log(firstText.textContent); // First — only the first .text element ``` **Key points:** - Uses the same syntax as CSS selectors — `#` for ID, `.` for class. - Only returns the **first** match — even if many elements match. - Returns `null` if nothing matches. - Far more powerful than `getElementById` — can use any CSS selector. --- ## 5. `querySelectorAll` Selects **all elements** that match a CSS selector. Returns a **NodeList** — a static, array-like object. **Syntax:** ```js const elements = document.querySelectorAll("css-selector"); ``` **JavaScript:** ```js // All paragraphs with class "text" const allText = document.querySelectorAll(".text"); console.log(allText.length); // 2 // NodeList supports forEach directly allText.forEach(p => console.log(p.textContent)); // First // Second ``` **More examples:** ```js // All

elements const items = document.querySelectorAll("li"); // All inputs of type checkbox const checkboxes = document.querySelectorAll("input[type='checkbox']"); // All direct children of a nav with class "link" const navLinks = document.querySelectorAll("nav > .link"); // Multiple selectors — comma separated const headings = document.querySelectorAll("h1, h2, h3"); ``` **NodeList vs HTMLCollection:** | | NodeList (`querySelectorAll`) | HTMLCollection (`getElementsByClassName`, `getElementsByTagName`) | |---|---|---| | Type | Static snapshot | Live — updates with DOM changes | | `forEach` | Available directly | Not available — must convert | | Convert to array | `Array.from(list)` or `[...list]` | `Array.from(collection)` | | Returned by | `querySelectorAll` | `getElementsByClassName`, `getElementsByTagName` | ```js // NodeList — forEach works directly document.querySelectorAll(".text").forEach(el => console.log(el.textContent)); // HTMLCollection — forEach does not work directly const items = document.getElementsByClassName("item"); Array.from(items).forEach(el => console.log(el.textContent)); // OR [...items].forEach(el => console.log(el.textContent)); ``` --- ## 6. Selecting Within an Element All selector methods can be called on any element — not just `document`. This scopes the search to that element's subtree. ```html

Card 1

Description 1

Card 2

Description 2

``` ```js const card1 = document.getElementById("card1"); // Search only within card1 — not the whole document const title = card1.querySelector(".title"); const desc = card1.querySelector(".desc"); console.log(title.textContent); // Card 1 console.log(desc.textContent); // Description 1 ``` This is much more precise than searching the entire document. --- ## 7. Checking if an Element Exists Always check for `null` before working with a selected element to avoid `TypeError`. ```js const el = document.getElementById("maybe-missing"); if (el) { el.textContent = "Found it!"; } else { console.log("Element not found."); } ``` Or using optional chaining: ```js document.getElementById("maybe-missing")?.classList.add("active"); ``` --- ## 8. Commonly Used Properties After Selection Once you have selected an element, these are the most commonly used properties: | Property / Method | Description | |---|---| | `element.textContent` | Get or set plain text content | | `element.innerHTML` | Get or set HTML content | | `element.value` | Get or set input field value | | `element.id` | Get or set the element's ID | | `element.className` | Get or set the full class string | | `element.classList` | Add, remove, toggle classes | | `element.style` | Read or set inline CSS styles | | `element.getAttribute("attr")` | Read an attribute value | | `element.setAttribute("attr", "val")` | Set an attribute value | | `element.removeAttribute("attr")` | Remove an attribute | | `element.href` | Get or set link href (on anchor tags) | | `element.src` | Get or set source (on img, script) | | `element.disabled` | Get or set disabled state (on inputs) | | `element.checked` | Get or set checked state (on checkboxes) | --- ## All Selector Methods — Quick Reference | Method | Selector Type | Returns | Count | |---|---|---|---| | `getElementById("id")` | ID | Element or `null` | One | | `getElementsByClassName("class")` | Class | Live HTMLCollection | All matches | | `getElementsByTagName("tag")` | Tag | Live HTMLCollection | All matches | | `querySelector("css")` | Any CSS selector | Element or `null` | First match | | `querySelectorAll("css")` | Any CSS selector | Static NodeList | All matches | --- ## Practical Example — Select and Modify Multiple Elements ```html

Apple
Banana
Mango

``` ```js // Select all items and log their text const items = document.querySelectorAll("#list .item"); items.forEach(item => console.log(item.textContent)); // Apple // Banana // Mango // Select only the active item const active = document.querySelector("#list .item.active"); console.log(active.textContent); // Banana // Select the list container and change its style const list = document.getElementById("list"); list.style.backgroundColor = "lightyellow"; // Add a class to all items items.forEach(item => item.classList.add("styled")); // Update text of first item items[0].textContent = "Green Apple"; ``` --- ## Summary ``` Selecting Elements | |-- getElementById("id") | Single element by ID | Returns element or null | |-- getElementsByClassName("class") | All elements with that class | Returns live HTMLCollection | No forEach — convert to array first | |-- getElementsByTagName("tag") | All elements with that tag | Returns live HTMLCollection | |-- querySelector("css") | First element matching CSS selector | Returns element or null | Supports any CSS selector | |-- querySelectorAll("css") | All elements matching CSS selector | Returns static NodeList | forEach works directly | |-- Scoped selection | element.querySelector() — search within element only ``` **Key rules to remember:** - `getElementById` is the fastest selector — use it when selecting by ID. - `querySelector` and `querySelectorAll` are the most flexible — they accept any CSS selector. - `querySelector` returns only the first match. Use `querySelectorAll` for all matches. - `HTMLCollection` is live and does not support `forEach`. `NodeList` is static and supports `forEach`. - Always check for `null` before accessing properties on a selected element. - Selector methods can be called on any element, not just `document`, to scope the search. - Pass just the name to `getElementById` — no `#`. Use `#` in `querySelector`.

Selecting Elements in DOM

Introduction

Selecting Elements