Selecting Elements in JavaScript

1. Selecting Elements by ID

The getElementById method is used to select an element by its unique ID.

Edit Copy

const element = document.getElementById("myElementId");

Example:

Edit Copy

<div id="myElementId">Hello World!</div>

Testing:

Edit Copy

console.log(element.innerText); // Output: Hello World!

2. Selecting Elements by Class Name

The getElementsByClassName method returns a live HTMLCollection of elements with the specified class name.

Edit Copy

const elements = document.getElementsByClassName("myClassName");

Example:

Edit Copy

<div class="myClassName">Item 1</div>
<div class="myClassName">Item 2</div>

Testing:

Edit Copy

console.log(elements[0].innerText); // Output: Item 1

3. Selecting Elements by Tag Name

The getElementsByTagName method returns a live HTMLCollection of elements with the specified tag name.

Edit Copy

const elements = document.getElementsByTagName("div");

Example:

Edit Copy

<div>First Div</div>
<div>Second Div</div>

Testing:

Edit Copy

console.log(elements.length); // Output: 2

4. Selecting Elements Using Query Selectors

The querySelector and querySelectorAll methods allow you to select elements using CSS selectors.

Edit Copy

const singleElement = document.querySelector(".myClass");
const multipleElements = document.querySelectorAll("div.myClass");

Example:

Edit Copy

<div class="myClass">Element 1</div>
<div class="myClass">Element 2</div>

Testing:

Edit Copy

console.log(singleElement.innerText); // Output: Element 1

5. Modifying Selected Elements

Once elements are selected, you can modify their properties, such as innerText, style, etc.

Edit Copy

const element = document.getElementById("myElementId");
element.innerText = "New Text!";
element.style.color = "red";

Conclusion

Selecting elements in JavaScript is essential for DOM manipulation. Understanding these methods allows you to effectively interact with and modify web page content.