DOM(Document object model) and selectors in javascript

Basic of DOM

DOM stands for (document object model) is used as a structure representation of HTML.It is a platform to combine the program of dynamic sites so that you can access the data and their content.It gives the structure of your site and and new design to your document.It represent the document which is based on node and object so that programming language can work as a interface for the page.The DOM is object oriented which means each node has their own property and their methods so that we can make changes in DOM.

DOM selectors

DOM selectors is used to bring basic things from DOM and you can use in many different ways with nodes and elements .Since jquery is used for long time for handling and controlling the DOM selectionbut with the help of java script it is very easy to work .Besides these jquery is very helpful for simple plugins and script that can used for simple actions .In javascript there are many selectors which are categories in two different part:

Single Element selectors
Multiple Element selectors

Single Element selectors

Single Element selectors allow to catch single element by its ID or CLASS whatever you define in your DOM and it only store one thing so when you use a single element selector and use class it show once in a DOM,it just catch the first element.

//document.get element by ID
console.log(document.getElementById('test1'));

This code gives you the code whose ID is test1. So basically it is used to find the code if you know the ID.

//Get things from element
console.log(document.getElementById('test1').id);
console.log(document.getElementById('test1').className);

So by using this code you will know the CLASSNAME and ID.

//change style
document.getElementById("test1").style.color="#00FFFF";
//or
document.getElementById("test1").style.color="aqua";
document.getElementById("test1").style.background="#A52A2A"; document.getElementById("test1").style.paddingTop="5px";
document.getElementById("test1").style.fontSize="16px";

//change content
document.getElementById("test1").textContent="Apple mobile";     
document.getElementById("test2").innerHTML='<span style="color:DarkMagenta "> Puma shoes</span>';
//or
//use can define variable and use that variable instead of writing document.getElementById so many times
const test=document.getElementById('test1');
test.innerHTML='<span style="color:DarkMagenta "> Puma shoes</span>';

Query selectors

//Query selectors
console.log(document.querySelector('#test3'));
console.log(document.querySelector('.list-group-item'));
console.log(document.querySelector('B'));

In the single selector first element is change its not apply to all the element with same CLASSNAME or ID name so for that we use different method.

//Query selectors()
document.querySelector('li').style.color='DarkSlateBlue';
//or
//document.querySelector('ul li').style.color='DarkSlateBlue';
document.querySelector('li:nth-child(2)').style.color='DarkTurquoise';
document.querySelector('li:last-child').style.color='DodgerBlue';
document.querySelector('li:nth-child(3)').textContent='Titan Watch';
//checkcode

Multiple Element selectors

Multiple Element selectors will give all of the element with their class and then return in DOM in the node which you like to use.It is also helpful to convert in the array form .

//getElementsByClassName
const test=document.getElementsByClassName('list-group-item');
console.log(test);
console.log(test[0]);
test[3].textContent='BMW car';
test[0].style.color='blue';

By using console.log(test); it show the list-item of a given class and if you want to see single itemof a particular class then you use console.log(test[0]); .

If you want to change style of particular item than use the code given above.

Using Tags to Get Elements

With the help of tags you change style in javascript it work same as you defineID or CLASS ,the only difference is that we have to define particular tag.

//Using Tagsname to get elements
const list=document.getElementsByTagName('li');
console.log(list);
console.log(list[0]);
list[3].textContent='BMW car';
list[0].style.color='blue';

You get the same output same as above by using tagsname also.The inner work is same

Keywords: