How To Access Elements in the DOM

Introduction

In comprehending the DOM Tree and Nodes, we went over the way the DOM is organized as a tree of things called nodes, which nodes may be text, opinions, or elements. Frequently whenever we access content inside DOM, it shall be through an HTML element node.

In purchase become effective in accessing elements inside DOM, it is crucial to own a knowledge that is working of selectors, syntax and terminology as well as an understanding of HTML elements. In this tutorial, we shall review a few how to access elements inside DOM: by ID, course, label, and question selectors.

Overview

listed here is a dining table breakdown of the five practices we’ll protect inside guide.

Gets Selector Syntax Method
ID #demo getElementById()
Class .demo getElementsByClassName()
Tag demo getElementsByTagName()
Selector (solitary) querySelector()
Selector (all) querySelectorAll()

It is essential whenever learning the DOM to form the examples all on your own computer to make certain you learn.( that you are understanding and retaining the information********)

You can conserve this HTML file, access.html, towards project that is own to through examples additionally article. If you’re uncertain just how to utilize JavaScript and HTML in your area, review our how exactly to include JavaScript to HTML guide.

access.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Accessing Elements inside DOM</title>

  <style>
    {html { font-family:|Html font-family that is{} sans-serif; color: #333; }
    human anatomy { max-width: 500px; margin: 0 auto; padding: 0 15px; }
    div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
  </style>

</head>

<body>

  <h1>Accessing Elements inside DOM</h1>

  <h2>ID (#demo)</h2>
  <div id="demo">Access me personally by ID</div>

  <h2>Class (.demo)</h2>
  <div course="demo">Access me personally by course (1)</div>
  <div course="demo">Access me personally by course (2)</div>

  <h2>Tag (article)</h2>
  <article>Access me personally by label (1)</article>
  <article>Access me personally by label (2)</article>

  <h2>Query Selector</h2>
  <div id="demo-query">Access me personally by query</div>

  <h2>Query Selector All</h2>
  <div course="demo-query-all">Access me personally by question all (1)</div>
  <div course="demo-query-all">Access me personally by question all (2)</div>

</body>

</html>

In this HTML file, we now have numerous elements that people will access with various document practices. It will look similar to this:( when we render the file in a browser,********)

Browser rendering of access.html page

We’ll be utilizing the methods that are different we outlined inside Overview above to gain access to the available elements inside file.

Accessing Elements by ID

The easiest method to gain access to an individual aspect in the DOM is through its unique ID. We are able to grab a feature by ID with the*********************)getElementById( that is( way of the document item.

document.getElementById();

In purchase become accessed by ID, the HTML element will need to have an id characteristic. We’ve a div element with an ID of demo.

<div id="demo">Access me personally by ID</div>

In the Console, let us have the element and designate it to your demoId adjustable.

  • const demoId = document.getElementById('demo');

Logging demoId to your system will get back our whole HTML element.

Output

<div id="demo">Access me personally by ID</div>

We know we are accessing the right element by changing the border home to purple.

  • demoId.style.border = '1px solid purple';

Once we do this, our page that is live will similar to this:

Browser rendering of ID element styling

Accessing a feature by ID is an way that is effective get an element quickly in the DOM. However, it has drawbacks; an ID must always be unique to the page, and therefore you will only ever be able to access a element that is single a time using the getElementById() technique. In the event that you wished to include a function to elements that are many the web page, your rule would swiftly become repititious.

Accessing Elements by Class

The course characteristic can be used to gain access to more than one elements that are specific the DOM. We can get all the elements with a given class name with the*********************)getElementsByClassName( that is( technique.

document.getElementsByClassName();

Now you want to access several element, plus in our instance we now have two elements with a demo course.

<div course="demo">Access me personally by course (1)</div>
<div course="demo">Access me personally by course (2)</div>

Let's access our elements inside Console and place them in an adjustable called demoClass.

  • const demoClass = document.getElementsByClassName('demo');

At this time, it might seem you'll alter the current weather the way that is same did with the ID example. However, we will get an error.( if we try to run the following code and change the border property of the class demo elements to orange,********)

  • demoClass.style.border = '1px solid orange';

Output

Uncaught TypeError: Cannot set home 'border' of undefined

The explanation this won't work is really because rather than getting one element, we now have an object that is array-like of.

Output

(2) [div.demo, div.demo]

JavaScript arrays should be accessed with an index quantity. We are able to consequently replace the element that is first of array through the use of an index of 0.

  • demoClass[0].style.border = '1px solid orange';

Generally whenever accessing elements by course, you want to use an alteration to any or all the current weather inside document with that class that is particular not only one. We are able to try this by producing a for cycle, and looping through every product inside array.

  • for (i = 0; i < demoClass.length; i++) {
  • demoClass[i].style.border = '1px solid orange';
  • }

once we operate this rule, our page that is live will rendered similar to this:

Browser rendering of class element styling

We have finally chosen every element regarding the web page which has a demo course, and changed the border home to orange.

Accessing Elements by Tag

A less way that is specific access multiple elements on the page would be by its HTML tag name. We access an element by tag with the*********************)getElementsByTagName( that is( technique.

document.getElementsByTagName();

For our label instance, we are utilizing article elements.

<article>Access me personally by label (1)</article>
<article>Access me personally by label (2)</article>

Just like accessing a feature by its course, getElementsByTagName() will get back an object that is array-like of, so we can alter every label inside document with a for loop.

  • const demoTag = document.getElementsByTagName('article');
  • for (i = 0; i < demoTag.length; i++) {
  • demoTag[i].style.border = '1px solid blue';
  • }

Upon operating the rule, the page that is live be modified like therefore:

Browser rendering of tag element styling

The cycle changed the border home of article elements to blue.

Query Selectors

If you have got any experience using the jQuery API, maybe you are acquainted jQuery's way of accessing the DOM with CSS selectors.

$('#demo'); // comes back the demo ID aspect in jQuery

We may do equivalent in ordinary JavaScript with the*********************)querySelector( that is( and querySelectorAll() practices.

document.querySelector();
document.querySelectorAll();

To access a element that is single we'll make use of the querySelector() technique. Within our HTML file, we now have a demo-query element

<div id="demo-query">Access me personally by query</div>

The selector for an id characteristic may be the hash expression (#). We are able to designate the element using the demo-query id to your demoQuery adjustable.

  • const demoQuery = document.querySelector('#demo-query');

In the actual situation of a selector with numerous elements, like a course or a label, querySelector() will get back the element that is first matches the query. We can use the*********************)querySelectorAll( that is( approach to gather most of the elements that match a certain question.

In our instance file, we now have two elements using the demo-query-all course placed on them.

<div course="demo-query-all">Access me personally by question all (1)</div>
<div course="demo-query-all">Access me personally by question all (2)</div>

The selector for a class characteristic is an interval or complete end (.), therefore we could access the course with .demo-query-all.

  • const demoQueryAll = document.querySelectorAll('.demo-query-all');

Using the forEach() technique, we could use along with green to your border home of matching elements.

  • demoQueryAll.forEach(query => {
  • question.style.border = '1px solid green';
  • });

Browser rendering of querySelector() styling

With querySelector(), comma-separated values work as an operator that is OR. For example, querySelector('div, article') shall match div or article, whichever seems first inside document. With querySelectorAll(), comma-separated values work as an AND operator, and querySelectorAll('div, article') will match all div and article values inside document.

Using the question selector practices is incredibly effective, you would in a CSS file as you can access any element or group of elements in the DOM the same way. For a list that is complete of, review CSS Selectors regarding the Mozilla Developer system.

Complete JavaScript Code

Below may be the script that is complete of work we did above. It can be used by you to gain access to most of the elements on our instance web page. Save the file as access.js( load and**********************) it in the HTML file before the closing body label.

access.js

// Assign all elements
const demoId = document.getElementById('demo');
const demoClass = document.getElementsByClassName('demo');
const demoTag = document.getElementsByTagName('article');
const demoQuery = document.querySelector('#demo-query');
const demoQueryAll = document.querySelectorAll('.demo-query-all');

// Change edge of ID demo to purple
demoId.style.border = '1px solid purple';

// Change edge of course demo to orange
for (i = 0; i < demoClass.length; i++) {
  demoClass[i].style.border = '1px solid orange';
}

// Change edge of label demo to blue
for (i = 0; i < demoTag.length; i++) {
  demoTag[i].style.border = '1px solid blue';
}

// Change edge of ID demo-query to red
demoQuery.style.border = '1px solid red';

// Change edge of course query-all to green
demoQueryAll.forEach(query => {
  question.style.border = '1px solid green';
});

Your last HTML file will appear similar to this:

access.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Accessing Elements inside DOM</title>

  <style>
    {html { font-family:|Html font-family that is{} sans-serif; color: #333; }
    human anatomy { max-width: 500px; margin: 0 auto; padding: 0 15px; }
    div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
  </style>

</head>

<body>

  <h1>Accessing Elements inside DOM</h1>

  <h2>ID (#demo)</h2>
  <div id="demo">Access me personally by ID</div>

  <h2>Class (.demo)</h2>
  <div course="demo">Access me personally by course (1)</div>
  <div course="demo">Access me personally by course (2)</div>

  <h2>Tag (article)</h2>
  <article>Access me personally by label (1)</article>
  <article>Access me personally by label (2)</article>

  <h2>Query Selector</h2>
  <div id="demo-query">Access me personally by query</div>

  <h2>Query Selector All</h2>
  <div course="demo-query-all">Access me personally by question all (1)</div>
  <div course="demo-query-all">Access me personally by question all (2)</div>

  <script src="http://www.digitalocean.com/access.js"></script>

</body>

</html>

You can still work with these files that are template make extra modifications by accessing HTML elements.

Conclusion

In this guide, we went over 5 how to access HTML elements inside DOM — by ID, by course, by HTML label title, and also by selector. The technique you will definitely used to get a feature or number of elements is determined by web browser help and exactly how elements that are many will likely be manipulating. You ought to now feel confident to gain access to any HTML aspect in a document with JavaScript through DOM.

LEAVE A REPLY

Please enter your comment!
Please enter your name here