Index

JavaScript
JavaScript Examples
CSS
CSS Examples

JavaScript Tutorial

JavaScript Examples

CSS Tutorial

CSS Examples

The HTML DOM Elements

Here, we are going to learn about the HTML DOM elements, which stands for Document Object Module with HTML and JavaScript. Submitted by Siddhant Verma, on October 18, 2019

HTML DOM Elements

The HTML DOM stands for Document Object Model and is a tree-like data structure that loads whenever an HTML page is loaded by the browser.

The DOM is a generic tree with the <html> tag as the root node. Based on the HTML code that follows, the tree has various other nodes and these nodes have some relationship with each other. Every node of the tree is called a DOM element. These DOM elements are something that we get a reference to through JavaScript to dynamically change or inject content into our web application.

In this article, we'll see various methods to get a reference to these DOM elements.

Go to your desired folder and create a file index.html with the following starter code,

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM Elements</title>
</head>

<body>
    <h1>DOM Elements</h1>
    <h3>Today we'll learn about DOM elements</h3>
    <div class="content">
	<p id="lorem">
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde impedit quisquam 
	eveniet atque consectetur, magni dolore laudantium maxime neque quibusdam 
	mollitia excepturi modi suscipit sapiente totam, facilis alias nemo rem.
	</p>
    </div>
    <span>This is a span tag</span>

    <script>
    </script>
</body>

</html>

Output

Now we have our boilerplate setup. we'll try to manipulate the data on the DOM by getting a reference to the DOM elements and we'll look at more than just one method to do this. First, let's identify all DOM elements.

We have <html>

, <head>, <title>, <h1>, <h3>, <div>, <p> and a <span>. We might add more to illustrate the examples but you have an idea of what DOM elements actually are?

Okay now let's see various methods to get a reference to these elements.

Finding HTML elements by id

The <p> inside the <div> with class content has an id. We can get this id and store the reference to this <p> using the getElementById() method. So let's do this.

<script>
        var para=document.getElementById('lorem');
        console.log(para);
</script>

Output

<p id = "lorem">...</p>

On the console, you'll see the whole lorem ipsum text under the <p>. Thus if we have an HTML element with a certainly given id, we can easily get a reference to it using the getElementById() method by passing the id of the element we want a reference to and storing it in a variable.

Finding HTML elements by class name

Our <div> has a class name of content. We can get a reference to this element using the getElementsByClassName() method. Notice that this method has elements in the plural, unlike the getElementById() method which has the element as singular. This implies that since id is assigned to be unique we only get a reference to one element whereas the getElementsByClassName() method gets a reference to all the elements associated with the class name.

<script>
        var content =document.getElementsByClassName('content');
        console.log(content);
</script>

Output

HTMLCollection [div.content]

You can see this logs an HTML Collection object on the console. This object has a property innerHTML, where we can see all the content, ie, the <p> along with the lorem ipsum.

Let's add another element with the same class.

<section class="content">
    <p>This is some text under section with class content</p>
</section>

<script>
    var content = document.getElementsByClassName('content');
    console.log(content);
</script>

Output

HTMLCollection(2) [div.content, section.content]

Now we'll get an HTML collection object with two objects inside it. Note that an HTML Collection is different from an Array or an Object. It may look similar, but we can't directly use the array methods or object methods on them.

Finding HTML Elements by Tag Name

Alternately, we can capture various elements by directly targeting their HTML tags.

<script>
    var text = document.getElementsByTagName('span');
    console.log(text);
</script>

Output

HTMLCollection [span]

Now you can see the span tag logged on to the console. Again, if there are multiple <span> in the document, our reference will be made to all those <span>.

Finding HTML elements by CSS Selectors

The easiest and convenient way to get a reference to an HTML element is by using the CSS Selectors. In all previous methods, we have seen that using class names or tag names is not a good method to get a hold of our elements as in cases where we have to work with a single element having the same class as a lot of other elements in our document. Using CSS selectors we simply pass the CSS selector that we want to attach a reference to. This means that any id will have a prefix of # and any class will have a prefix of.

<script>
	var title=document.querySelector('h1');
	var mainContent=document.querySelector('.content');
	var para=document.querySelector('#lorem');
	console.log(title,mainContent,para);
<script>

Output

<h1>DOM Elements </h1>
<div class="content">...</div>
<p id="lorem">...</p>

Thus using the querySelector we can grab any element we want. While working with DOM manipulation, it is the best way to get a reference to the DOM elements with only exceptional times where we might use the other methods.

Comments and Discussions!

Load comments ↻