FUN with DOM

Last few days I have been learning JavaScript with the aim of becoming a full stack developer. As I go through this journey, I feel it would benefit me (and hopefully others) if I document my learnings. Thus comes the first installment - DOM (not to be confused with DOMinic Toretto - bad joke? Yeah, probably).

So what is DOM?

Dom is nothing but a model of a document where contents can be treated as objects thus every element of the HTML becomes an object. The model here represents how the objects form a tree-like structure. It represents the document as a node tree, where each node represents part of the document.
In simple words, a web page is a document that can be either displayed in the browser window or as the HTML source but it is the same document in both cases. Document Object Model (DOM) represents that same document so it can be manipulated and the content of the page is stored in DOM and can be accessed and manipulated using Javascript. In order to manipulate the element one has to first select that particular element.

Now, let us see how we can access the contents of a page using DOM(traversing the DOM):

Accessing the elements of the page can be done using various methods like 'querySelector', 'querySelectorAll',getElementsBy*, etc. For example,

var elem = document.querySelector('.check');

Here the document is a predefined object and it represents the entire page that is loaded into the browser. Using this document object we can access various predefined functions and objects. In the above code, we are using querySelector() which returns the first element within the document that matches the specified selector (in this case the class "check").

Manipulation of Content:

In the above example, the elem element is an object representing the targeted div having class "check". Now using this elem we can manipulate the contents of that div and even make this div perform a function. Now let us see what we can do with it.

elem.textContent ="Hello World";
 
In the above code, we have changed the text content which was earlier Lorem to Hello World.

Let us take another example.

let buttonObj = document.querySelector('.button');

Here we are selecting a button by its class and creating an object buttonObj.

buttonObj.addEventListener('click',displayHello);

Let me explain what the above code does. The addEventListener() is an inbuilt JavaScript function that takes the event and also a second argument, a function that gets called every time the event is fired. Thus in our case whenever we click on the button, the function displayHello gets called which is declared as follows:

function DisplayHello(){
alert("Hello");
}

So every time we click on the button an alert window appears showing a message "Hello World". 

This is just the basic use of DOM, I hope I could provide an insight of what DOM is, how we can access the elements of a web page using DOM and how we can manipulate the contents. For more clarity the following resources can be used:

www.developer.mozilla.org

https://javascript.info

Comments

[Habdul Hazeez]

I will recommend that you use syntax highlighting to differentiate your code snippets from the rest of the article.

The function displayHello() would then be rendered as:

function DisplayHello(){
  alert("Hello");
}

If you need help on how to go about it (the syntax highlighting), let me know.

[Ayushman Parasar]

Thank you so much for the insight, I would definitely use syntax highlighting from now on and I would really like to know your advice on it.

[Habdul Hazeez]

I will put something together and let you know when am done. But for now you can read the following post:

These lifehacks will change the way you write Markdown!

Yechiel Kalmenson ・ Aug 16 ・ 3 min read

#writing #markdown #beginners #blogging

[Habdul Hazeez]

Here is the post:

A Beginners guide to the DEV editor

Habdul Hazeez ・ Dec 14 ・ 11 min read

#beginners #dev

[Ayushman Parasar]

It is awesome!!!
Thanks.

[Habdul Hazeez]

It is awesome!!!
Thanks.

You are welcome.