DEV Community

Ayushman Parasar
Ayushman Parasar

Posted on

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

Top comments (6)

Collapse
 
ziizium profile image
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.

Collapse
 
ayushmann profile image
Ayushman Parasar • Edited

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.

Collapse
 
ziizium profile image
Habdul Hazeez

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

Collapse
 
ziizium profile image
Habdul Hazeez
Thread Thread
 
ayushmann profile image
Ayushman Parasar

It is awesome!!!
Thanks.

Thread Thread
 
ziizium profile image
Habdul Hazeez

It is awesome!!!
Thanks.

You are welcome.