DOM Fundamentals | Easy Way to Grab it!!

4 min readAug 27, 2020

We all know DOM and its theoritical fairytale.

Let us jump straight into seeing it in a more practical way!

This is the UI , boiler plate for DOM fundamentals injection.

So we all can make this boiler plate very easily using Bootstrap and some HTML basic structure. Try it for once otherwise here is the code for you:-)

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Courses | JS </title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;;
}
#btnn{
display: inline-block;
margin-right: 5px;
}
}
</style>
</head>
<body class=”bg-dark”>
<div class=”container bg-warning p4">
<h1 class=”text-center”>Learn Code Today!</h1>
<ul class=”list-group”>
<li class=”list-group-item”>
Javascript course <span class=”float-right”>$2.1</span>
</li>
</ul>
<button type=”button” id=”btnn” class=”btn btn1 btn-success btn-lg mt-4 mx-auto d-block sort-btn”>
Low-Sort Courses
</button>
<button type=”button” id=”btnn”class=”btn btn-primary btn-lg mt-4 mx-auto d-block hsort-btn”>
High-Sort Courses
</button>
</div>
<! — <script src=”app.js”></script> →
</body>

</html>

You can add multiple courses into it , adding a lot of <li> elements very statically. But what if we want to use the power of JS to inject elements into it dynamically.

Lets understand the magic of app.js:-

We initially need to construct an object consisting of name and price of course. This is the content to be added dynamically into the web page.

Now your task is

Make a function
Loop through an array
Construct list items and inject list-items into it.

So into the function generateResult().. we first grab the UI element , and then we make the html inside ul equal to blank/empty (for future purpose when we wil add buttons into the page.. will explain in detail later) .

Then you should loop through the courses object using foreach with an argument name : course and a callback function ()=>{} which states:

Create a <li> element using document.createElement()
Add a class name into it, like previous static li item we declared above using classList.add(‘name’)
Now <li> should consist name of the course which is created using createTextNode(object.name) .. that is courses.name .
After that we need to append class name and course name into<li>
The same happens with the price: First we need to create a <span> element into it .
Then we need to add a classname to <span> element using the same class name we used with static web page structure.. showed at the top.
Now the span should add the price declared in courses object using create TextNode(courses.price) with a concatenation of $ sign
Now you need to append this price into <span>
And then append <span> into <li>
And finally <li> is appended into <ul> using appendChild()

This is how the page looks like now:

The list items are injected into the HTML web page dynamically .

Now one issue is whenever you reload the page, dynmaically entered list items are gone.

So the solution is to add event listener to it:

window.addEventListener(“load”, generateList);

What left is the function of Button, we want buttons to sort the courses according to the price either in both ascending and descending problem.

so the button is grabbed using document.querySelector() and an event listener is attached to it , such that when you will click a button , callback is performed where the prices are sort using inbuilt sort() function.

The arr.sort() method is used to sort the array in place in a given order according to the compare() function.

arr.sort(compareFunction)

compareFunction: This parameters is used to sort the elements according to different attributes and in the different order.

compareFunction(a,b) < 0
compareFunction(a,b) > 0
compareFunction(a,b) = 0

So This is all the fundamentals of DOM and its basics that serves as a basic core to perform any dynamic operation onto the web page!

Thankyou! I hope you get to learn something from it.

DOM Fundamentals | Easy Way to Grab it!!

You can add multiple courses into it , adding a lot of <li> elements very statically. But what if we want to use the power of JS to inject elements into it dynamically.

Written by sakshi jain