Methods of Accessing DOM Elements with JavaScript

What will you learn in this guide?

In this comprehensive guide, you'll learn step by step five basic ways to access DOM elements using JavaScript: getElementById, getElementsByClassName, getElementsByTagName, querySelector, and querySelectorAll. With these methods, you can select and dynamically change HTML elements on your web page and create interactive content.

What is DOM?

DOM (Document Object Model) is the JavaScript-accessible version of the HTML structure of a web page. The browser represents the page with this model. We, as developers, can also access the elements in this model and change the content or style.

Introduction: Why Are DOM Elements Important?

If you want to make the web page dynamic, you must first learn to access HTML elements on the DOM. This access is the basis for actions such as changing color when a button is clicked, validating a form, or managing user interactions. The following table summarizes the methods available to access DOM elements:

Access Type Selector Syntax Method ID #example getElementById() Class .example getElementsByClassName() Tag div getElementsByTagName() Query Selector (Singular) #example or .example querySelector() Query Selector (Plural) .example or p querySelectorAll() Sample HTML File: dom-access.html

The structure below is a sample HTML file so you can test all methods.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <title>DOM Elementlerine Erişim</title>
  <style>
    body { max-width: 550px; margin: 0 auto; padding: 20px; font-family: sans-serif; }
    div, section { padding: 12px; margin: 6px; border: 1px solid #c9c9c9; }
  </style>
</head>
<body>

  <h1>JavaScript ile DOM Elementlerine Erişim</h1>

  <h2>ID (#ana-kutu)</h2>
  <div id="ana-kutu">ID ile erişilecek öğe</div>

  <h2>Sınıf (.liste-elemani)</h2>
  <div class="liste-elemani">Sınıf ile erişilecek öğe (1)</div>
  <div class="liste-elemani">Sınıf ile erişilecek öğe (2)</div>

  <h2>Etiket (section)</h2>
  <section>Etiket adı ile erişilecek öğe (A)</section>
  <section>Etiket adı ile erişilecek öğe (B)</section>

  <h2>Sorgu Seçici (#tekil-kutu)</h2>
  <div id="tekil-kutu">querySelector ile erişilecek öğe</div>

  <h2>Sorgu Seçici Tümü (.coklu-kutu)</h2>
  <div class="coklu-kutu">querySelectorAll ile erişilecek öğe (X)</div>
  <div class="coklu-kutu">querySelectorAll ile erişilecek öğe (Y)</div>

  <script src="dom-erisim.js"></script>
</body>
</html>

Accessing DOM Elements in 5 Steps

Access by ID – getElementById()

This method is the fastest way to access a unique item.

const kutuID = document.getElementById('ana-kutu');
kutuID.style.border = '2px solid purple';

➡️ This command selects the element whose ID is the main-box and paints its border purple.

Access with Class – getElementsByClassName()

We use the class name to select multiple elements.

const kutuClass = document.getElementsByClassName('liste-elemani');
for (let i = 0; i < kutuClass.length; i++) {
  kutuClass[i].style.border = '2px solid orange';
}

➡️ Turns the frame of all .list-element classed elements orange.

Access by Tag – getElementsByTagName()

Provides access to multiple items using the tag name.

const kutuTag = document.getElementsByTagName('section');
for (let i = 0; i < kutuTag.length; i++) {
  kutuTag[i].style.border = '2px solid blue';
}

➡️ Selects all items labeled <section> on the page and turns their borders blue.

Single Query Selector – querySelector()

Selects a single element with CSS selector syntax.

const kutuQuery = document.querySelector('#tekil-kutu');
kutuQuery.style.border = '2px solid red';

➡️ Selects the first item with a unique box ID and adds a red border.

Multiple Query Selector – querySelectorAll()

Selects all matching elements and returns NodeList.

const kutuQueryAll = document.querySelectorAll('.coklu-kutu');
kutuQueryAll.forEach(query => {
  query.style.border = '2px solid green';
});

➡️ Turns the frame of all elements with the .coklu-box class green.

Frequently Asked Questions (FAQ)

Is there any difference between getElementById() and querySelector('#id')?

Yes. The first one works only with ID and is faster. Secondly, it works with CSS selector logic and is flexible.

Why do some methods return NodeList or HTMLCollection and not array?

Because DOM collections can be live or static. getElementsBy... methods return a live collection, while querySelectorAll() is static.

Which one should I use and when?

ID → for unique item
Class/Tag → for multiple items
QuerySelector → for complex selectors

How does querySelector() behave on multiple items?

Returns the first matching element. querySelectorAll() is used to get all.

Result

Now you know how to access DOM elements with JavaScript. With this skill, you can select every element on your web page and create dynamic effects and interactions. Try these examples safely and quickly by hosting your projects on the GenixNode infrastructure.

What will you learn in this guide?​

What is DOM?​

Introduction: Why Are DOM Elements Important?​

Accessing DOM Elements in 5 Steps​

Frequently Asked Questions (FAQ)​

Result​