Top community members
All Wiki Articles Create Wiki Article

Welcome to Dirask IT community! ❤ 💻
We are community of people that helps each other.

If you are beginner in IT field, you are more then welcome to ask questions, it will help you to learn faster. We are here to help you.

We are always beginner in something, we just need to remember it along the way.

there are no wrong questions - Ask Question

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

0 contributions
12 points

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
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more