Javascript And The DOM

In one of my last articles, I talked about Javascript and its relationship with HTML and CSS. Today, we will be talking about how Javascript accesses elements through the DOM. How it accesses HTML nodes to effect some form of manipulation to achieve dynamic output to the client side.

The DOM stands for Document Object Model, and it's a collection of a tree of nodes created by the browser. These nodes are the interface used by Javascript to manipulate and structure an application or a website. Nodes are language-neutral, meaning they can be used by any programming language to dynamically access and update the content of a document. Each node is an object, and they have properties and methods that can be performed on them to manipulate a part of the document or application being worked on.

The DOM can also be called a Web API used by programming languages(not just javascript) to manipulate output on a client side. Examples of such APIs are functions like getElementById(), createElement(), getElementByTagName(), etc.

Below is an example of a tree of nodes;

This tree represents our document as a whole; from the head, and title to the body. Next, we will talk about how Javascript accesses the HTML elements through the DOM API.

HOW JAVASCRIPT ACCESSES THE HTML DOM.

There are several things javascript can do with the HTML DOM:

Access and manipulate HTML elements.

Access and manipulate CSS elements.

Create and fire Events. Events are actions created by javascript functions that react on your HTML elements.

Above is an HTML file with the name index.html. All HTML files must end with the file type .html.

Line 10-14 is the BODY of the .html file. That is where all the contents of the document go. It houses every element that javascript would access and manipulate.

Lines 11-13 are paragraph tags, represent by the

There are three (3) paragraph tags here. In the next image, I’ll show how to add a Javascript tag in the .html file so that the HTML

tags can be selected and manipulated.

In line 14, we just added a script tag. This is where all your Javascript code goes. So now, let’s access the

elements in our script tag.

To access the

elements, we could do in several ways:

GET THEM BY TAG NAME

If we want to access specific elements e.g, the second paragraph tag, we could do that in more ways than one, but I would point out 2 ways in which we can achieve that.

In this method, we are accessing all the

tags, and using the array method [ 1 ] to access the second paragraph tag

This is the second paragraph

Arrays are 0 indexes based, so the length of our

tags is 2, starting from 0 – 2.

Here, we are accessing the third

tag with an Id with the name third-p, through the getElementById() DOM method.

In the next image below, we will be accessing the first

tag in line 11, through the getElementsByClassname() DOM API.

The first

tag can be accessed and manipulated in line 17 through the getElementsByClassname() method initialized as firstP.

There are other HTML DOM API methods through which elements can be accessed such as:

The querySelector() method

The querySelectorAll() method.

I hope this article is clear and helpful enough. I am very open to corrections and additions because as developers, we are lifetime learners.

I hope you had a great read. Please LIKE and refer someone to read as well.