JavaScript DOM Manipulation
DOM: There are two sides of the working process of JavaScript. One is client-side JavaScript (DOM) another one is server-side JavaScript (Node.js). Simply, DOM is a Document Object Model. When a web page loaded then the browser creates a Document Object Model of the page. In another explanation, DOM is a JavaScript representation of the HTML file.
How DOM Works: Actually, Web browser doesn’t know about HTML file. When we loaded an HTML file on the browser, First of all, the browser creates an Object through DOM from the HTML file. It is a tree-like Data Structure. That helps us to excess every property of this Object so quickly. I know It’s a little bit confusing yet, Don’t worry, let’s focus some examples.
We know, in the data structure tree it has one or more nodes. Similarly, in DOM Object there are lots of nodes. Through this example, we see the ‘Document’ element is a parent node of all the other nodes. Keep in mind every node is an Object. Document node has two children ‘Doctype & HTML’. Similarly, HTML has ‘HEAD & BODY’ child. So approximately, if you access to paragraph (p) text node of BODY how will be the code. Whereas every node is an Object so, access code is Document.Doctype.HTML.BODY.p.text
This is the proper example of DOM manipulation. Let’s get acquainted with some popular DOM nodes.
As I say, every element is a node.
I think, after seeing this picture you have a clear understanding of How DOM works.
Window Vs Document: Sometimes those fancy words are a little bit confusing for a beginner perspective. ‘Window’ is a browser Object, and Document is a property of Window. In detail, When you attached something in a global variable that instant attached in the window object. There are lots of predefined window elements such as setTimeout, alert, setInterval, location, and so on.
Go to your browser console and just write ‘window’ then enter and you get this.
DOM Selector: In this section, I will try to explain the selector with a code example.
This is an example of ‘document.getElementById()’ selector. This selector work with an id of HTML attribute. Initially, in the index.html file, the h1 tag text node is ‘Hello, Bangladesh’ but when we used the document.getElementById() in the app.js file the output changed by ‘Hi, Reader’. How awesome and simple the selector is! right.
There are lots of selectors in DOM but most uses selector are ‘document.getElementsByClassName()’, ‘document.getElementsByTagName()’, and so on. getElementsByClassName() work with class attribute. On the other hand getElementsByTagName() work with each an every tag of HTML elements.
DOM querySelector: There are two selectors one ‘querySelector’ and another one is ‘querySelectorAll’.
Selector vs querySelector has only syntax different. Show the example of code this syntax is similar to CSS style.
Output:
DOM Events: Simply, Every click is an event. There are lots of events in DOM. Show the picture.
For more details read this MDN Docs.
When we click the ‘click Me’ button then its background-color has been changed.
Output:
