Languages
[Edit]
EN

JavaScript - different ways of accessing elements in the DOM

12 points
Created by:
Lilly-Grace-Greig
571

In this article, we would like to show you how to access elements in the DOM using JavaScript.

1. document.getElementById method example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="my-tag"></div>
  <script>

    var handle = document.getElementById('my-tag');

    handle.innerText = 'Hello world!';

  </script>
</body>
</html>

Result:

document.getElementById usage example
document.getElementById usage example

2. document.getElementsByTagName method example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div>Tag 1</div>
  <div>Tag 2</div>
  <div>Tag 3</div>
  <script>

    var handles = document.getElementsByTagName('div');

    for (var i = 0; i < handles.length; ++i) {
        handles[i].innerText = 'Hello world!';
    }

  </script>
</body>
</html>

Result:

document.getElementsByTagName usage example
document.getElementsByTagName usage example

3. document.getElementsByClassName method example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div class="tag">Tag 1</div>
  <div class="tag">Tag 2</div>
  <div class="tag">Tag 3</div>
  <script>

    var handles = document.getElementsByClassName('tag');

    for (var i = 0; i < handles.length; ++i) {
        handles[i].innerText = 'Hello world!';
    }

  </script>
</body>
</html>

Result:

document.getElementsByClassName usage example
document.getElementsByClassName usage example

4. document.querySelector method example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="tag-1" class="tag">Tag 1</div>
  <div id="tag-2" class="tag">Tag 2</div>
  <div id="tag-3" class="tag">Tag 3</div>
  <script>

    var handle = document.querySelector('div'); // gets element handle by tag name

    // Alternatively handle can be get by:
    // - id value:     var handle = document.querySelector('#tag-1');
    // - class name:   var handle = document.querySelector('.tag');
    // - all other css selectors

    handle.innerText = 'Hello world!';

  </script>
</body>
</html>

Result:

document.querySelector usage example
document.querySelector usage example

5. document.querySelectorAll method example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
  <div id="tag-1" class="tag">Tag 1</div>
  <div id="tag-2" class="tag">Tag 2</div>
  <div id="tag-3" class="tag">Tag 3</div>
  <script>

    var handles = document.querySelectorAll('div'); // gets handles by tag name

    // Alternatively handles can be get by:
    // - id value:     var handles = document.querySelectorAll('#tag-1');
    // - class name:   var handles = document.querySelectorAll('.tag');
    // - all other css selectors

    for (var i = 0; i < handles.length; ++i) {
        handles[i].innerText = 'Hello world!';
    }
    
    // Warning: id should be unique, so querySelectorAll() with id is not recommended 

  </script>
</body>
</html>

Result:

document.querySelectorAll usage example
document.querySelectorAll usage example

6. Built-in handles example

// ONLINE-RUNNER:browser;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <style>

    .block {
        border: 1px solid red;
        border-radius: 3px;
    }

  </style>
</head>
<body>
  <h3>Built-in handles example</h3>
  <script>

    var head = document.head; // html->head handle
    var body = document.body; // html->body handle
    var script = document.currentScript; // currently executed script handle

    var container = document.createElement('div');

    function appendText(text) {
        var handle = document.createElement('pre');
        handle.className = 'block';
        handle.innerText = text;
        container.appendChild(handle);
    }

    body.style.background = 'blue';

    appendText(head.innerHTML);
    appendText(script.innerHTML);

    script.parentNode.insertBefore(container, script);

  </script>
</body>
</html>

Result:

Built in handles usage example
Built-in handles usage example

Alternative titles

  1. JavaScript - different ways of accessing elements in the DOM (e.g. by get element by ID, Tag, Name, Class, CSS Selector, built-in handles.)
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join