Explaining JS DOM to a Beginner in 2021

This write up assumes that you are new to JavaScript DOM, however, you can still sharpen your mind here if you think you have forgotten some few things about your knowledge in DOM(Document Object Model)
JavaScript is in almost every application you see around today. So we will be talking about the DOM aspect which encircles around the Browser.

JavaScript DOM allows us to manipulate any elements in our HTML codes. This includes the following functionalities:

Changes in all HTML attributes in the page( src, alt, href, width, height, and so on).
Changes in all HTML elements in the page(body, h1, p, and so on).
Changes in all the CSS styles in the page( color, font-size, font-weight, text-align).
Removal existing HTML elements and attributes.
Addition of new HTML elements and attributes.
Reactions to all existing HTML events in the page.
Creation of new HTML events in the page.

Now let us illustrate the first three functionalities. Open a code editor of your choice and create a basic HTML code: This html file can be called index.html or whatever you want.

<!DOCTYPE html>
<html>
  <head>
    <title>JS DOM</title>

  </head>
  <body>
    <h1 id="myPara">JS DOM Manipulation</h1>
    <p>With JS DOM, you can manipulate elements</p>
    <script src="main.js"></script>
  </body>
</html>

Nothing pretty. Just a basic html page displaying JS DOM Manipulation
And to make our code clean properly structured, we will create a javascript file in the same directory where you saved the html file.

const changeStyle = document.getElementById('myPara');

changeStyle.addEventListener('click', function() {
  changeStyle.style.color = 'red';
});

There are so many methods in JS DOM, w will be briefing looking at them:

addEventListener() method sets up a function that will be called whenever the specified event is delivered to the target. Events refer to what happens to an HTML element, such as clicking, focusing, or loading, to which we can react with JavaScript. We can assign JS functions to listen for these events in elements and do something when the event had occurred.

This is to say that in the JavaScript code above, we simply got the element in the HTML by its id: myPara, and equaled it to changeStyle
The second line in the JavaScript code is where we listened for a click event and added a function that changes the color of the element to red.

The createElement() method is another one that creates a new HTML element using the name of the HTML tag to be created, such as 'h', 'p', 'img' or 'div'. We will look at this again by creating a blank HTML page like so:

<!DOCTYPE html>
<html>
<head>
    <title>Create HTML Element</title>
</head>
<body>

<script src="create.js"></script>   
</body>
</html>

And this create.js file

const body = document.querySelector('body');
const strong = document.createElement('h3');
strong.textContent = "Hello World, Let's Create some Element";
body.appendChild(strong);

What this does is it simply selected the element body in the HTML file and that was done by using the method: querySelector(). The next line created an element: h3
which is assigned to a variable const strong and it is attached to DOM property textContent.

appendChild() method adds an element as the last child to the HTML element that invokes this method.
removeEventListener() method detaches an event listener previously added with the addEventListener() method from the event it is listening for.
The replaceChild() method replaces a child element with another one belonging to the parent element that calls this method.

SYNTAX

element.replaceChild(newChildElement, oldChildElement)

For more information, look at this here

DEV Community

Explaining JS DOM to a Beginner in 2021

Top comments (0)