WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

JS Access Dom

Previous Next

JavaScript provides several methods to interact with and manipulate the Document Object Model (DOM). The DOM represents the structure of a web page as a hierarchical tree of elements, and these methods allow you to access specific parts of the document for dynamic updates.


Method

Returns

Live/Static

Use Case

getElementById

Single element

Live

Best for accessing unique elements by id.

getElementsByClassName

HTMLCollection

Live

Access multiple elements with the same class.

getElementsByTagName

HTMLCollection

Live

Access elements by their tag name.

querySelector

Single element

Static

Access the first element matching a CSS selector.

querySelectorAll

NodeList

Static

Access all elements matching a CSS selector.

Accessing by id document.getElementById()

  • Retrieves an element by its unique id attribute.
  • Returns: A single element or null if not found.
Example
<h1 id="header">Access element by using id</h1>
<p>Open console in browser then you will see output</p>
<script>
const header = document.getElementById("header");
console.log(header.textContent); // Outputs: "Access element by using id"
</script>
Try it yourself

Accessing by Class document.getElementByClassName()

  • Retrieves all elements with a specified class name.
  • Returns: A live HTMLCollection (like an array, but not exactly).
Example
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
<script>
const items = document.getElementsByClassName("item");
console.log(items); // Outputs: HTMLCollection of <li> elements
</script>
Try it yourself

Accessing by Tag Name document.getElementByTagName()

  • Retrieves all elements with a specified tag name.
  • Returns: A live HTMLCollection.
Example
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs); // Outputs: HTMLCollection of <p> elements
</script>
Try it yourself

Accessing by CSS Selectors Single Element document.querySelector()

  • Retrieves the first matching element based on a CSS selector.
  • Returns: A single element or null if not found.
Example
<div>
<span class="highlight">Important</span>
<span>Not Important</span>
</div>
<script>
const highlight = document.querySelector(".highlight");
console.log(highlight); // Outputs: <span class="highlight">Important</span>
</script>
Try it yourself

Accessing by CSS Selectors Multiple Elements document.querySelectorAll()

  • Retrieves all matching elements based on a CSS selector.
  • Returns: A static NodeList (not live).
Example
<div>
<span class="highlight">Important</span>
<span>Not Important</span>
</div>
<script>
const allSpans = document.querySelectorAll("span");
console.log(allSpans); // Outputs: NodeList of all <span> elements
</script>
Try it yourself

Looping Through Multiple Elements:

When accessing multiple elements (e.g., using getElementsByClassName or querySelectorAll), you can loop through them to perform actions:

Example
<ul>
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
</ul>
<script>
const items = document.querySelectorAll(".list-item");
items.forEach((item) => {
console.log(item.textContent); // Logs each item's text
});
</script>
Try it yourself

Previous Next