Languages
[Edit]
EN

JavaScript - different ways of accessing elements in the DOM e.g. by get element by ID, Tag, Name, Class, CSS Selector, built-in handles.

12 points
Created by:
Marcin
2462

In JavaScript it is possible to access element in few ways.

1. document.getElementById method example

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

      var handle = document.getElementById('my-tag');
    
      handle.innerText = 'Hello world!';

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

Run it online here.

Result:

document.getElementById usage example
document.getElementById usage example

2. document.getElementsByTagName method example

<!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

<!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

<!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>

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

    // Alternatively handle can be get by:
    // - id:
    //   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

4. document.querySelectorAll method example

<!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>

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

    // Alternatively handles can be get by:
    // - id (this approach is not recommended because of id should be unique):
    //   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!';

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

Result:

document.querySelectorAll usage example
document.querySelectorAll usage example

5. Built in handles example

<!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
Hey 👋
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.