DEV Community

Ranjith srt
Ranjith srt

Posted on • Edited on

js | DOM |


Document Object Model (DOM) manipulation

Enter fullscreen mode Exit fullscreen mode

imagine you have a physical bulletin board where you can pin up notes.you can add new notes, remove old ones , or update existing notes on the boaed.similarly in a web page you can use jscrtpt to manipulate the Dom ( Document object model)to add ,remove or change element's one the page.

The following the way to Selecting & Modifying Element in DOM :
Enter fullscreen mode Exit fullscreen mode

1.getElementById
2.getElementsByClassName
3.getElementsByTagName
4.querySelector
5.querySelectorAll

getElementById :  
Enter fullscreen mode Exit fullscreen mode

browsers - right click -inspect

select a single element on it is unique id attribute.


    //var name                          //particular id name
const heading = document.getElementById ('main-heading')  //selection

console.log(heading);

Enter fullscreen mode Exit fullscreen mode
finding value:
Enter fullscreen mode Exit fullscreen mode

console.log(heading.innerHtml);  // outputs the html content's inside the element 

Enter fullscreen mode Exit fullscreen mode

output:


let's play with Javascript   //ulla irukka content ella eduttuttu vaarum
<p> Hello </p>   
<h1> Hiii </h1>

Enter fullscreen mode Exit fullscreen mode

console.log(heading.textConent);  //  outputs the text content's inside the element 

Enter fullscreen mode Exit fullscreen mode

output:


let's play with Javascript  //text mattm  eaduthuttu vaarum.  // 1 mattum thookittu vaarum
Hello

Enter fullscreen mode Exit fullscreen mode

changing value :


heading.innerHtml = 'see, i am from planet earth'; //override aagum

Enter fullscreen mode Exit fullscreen mode

heading.textContent = 'see, i am from planet mars'; //override aagum  //2nd option

Enter fullscreen mode Exit fullscreen mode

function:


          // f name
function  chageHeading() {

setTimeout(( ) =>{

heading.innerHtml = 'see, i am from planet sun'; //override aagi 2s appram maarum
 // 2s delay 
} . 2000 );


}

 chageHeading()

see, i am from planet sun'

Enter fullscreen mode Exit fullscreen mode

getElementsByClassName

// multiple elemrnt select panna..


    //var name                          //particular class name
const listitems= document.getElementByClassName ('list-item')  //election

console.log(list-items);

Enter fullscreen mode Exit fullscreen mode

output:


<li class= "list-item"> Hello1 </p>
<li   ''   ''         > Hiii 2</h1>   // multiple element select panna
<li    ''   ''        > Hello 3 </p>   
<li     ''    ''      > Hiii 4</h1>

Enter fullscreen mode Exit fullscreen mode

access particular elemrnt:


console.log(listitems.item(0));
<li class= "list-item"> Hello 1</li>   

console.log(listitems.item(1));
<li class= "list-item"> Hiiii 2 </li> 

console.log(listitems.item(1).innerHtml);  //text mattum print aagum (value)
console.log(listitems.item(2).innerHtml);  

Enter fullscreen mode Exit fullscreen mode

output

Hello 1 // value
Hiii 2
Enter fullscreen mode Exit fullscreen mode

loop:


for ( let i = 0 ; i < listItems.length ; i++){

console.log(listitems.item(i).innerHTML);  

}

output

Hello 1 // value
Hiii 2
Hello 1 // value
Hiii 2

Enter fullscreen mode Exit fullscreen mode

for ( let i = 0 ; i < listItems.length ; i++){

listitems.item(i).innerHTML = 'modified item ${i+1}';  

}

<li class= "list-item"> Hello1 </p> // hello1 ippo modified item 1 aagm.

modified item 1
modified item 2
modified item 3
modified item 4

Enter fullscreen mode Exit fullscreen mode

convert to array


       var n            type conversion
const itemsArray = Array.from(listItems);

itemsArray.forEach((item) =>{

console.log(item.textContent);  

));


output

modified item 1
modified item 2
modified item 3
modified item 4

Enter fullscreen mode Exit fullscreen mode

getElementsByTagName


const contents = document.getElementById('content').getElementsByTagName('p') console.log(contents);

Enter fullscreen mode Exit fullscreen mode

function contentItemsStyle() {  // particular element select Panni styles apply pannum. 

contents.item(0).style.color = 'red';

contents.item(1).style.fontSize = '14px';

contents.item(2).style.fontWeight = '700';

contents.item(3).style.backgroundColor = 'pink';

contents.item(3).style.color = 'white';

}

contentItemsStyle(); //function 

Enter fullscreen mode Exit fullscreen mode

function contentStyle() {  // multiple elementsku styles apply pannum  

for (let i = 0; i < contents.length; i++) {    //for loop

contents.item(i).style.paddingBottom = '6px';

}

}

contentStyle();

Enter fullscreen mode Exit fullscreen mode

Remove element from Dom:


const message document.getElementById('message');

Enter fullscreen mode Exit fullscreen mode
// message.remove();
Enter fullscreen mode Exit fullscreen mode

setTimeout(() => { message.remove(); ), 3000);  //3s apram dlt agum

Enter fullscreen mode Exit fullscreen mode

Adding element to DOM:


const newParagraph = document.createElement('p');

newParagraph.textContent = 'This is a new paragraph added dynamically.';

newParagraph.style.color = 'green';

newParagraph.classList.add('new-paragraph');

const container = document.getElementById('main');

Enter fullscreen mode Exit fullscreen mode

appendChild(): Adds a new element as the last child of the parent element.

Enter fullscreen mode Exit fullscreen mode

insertBefore(): Inserts a new element before an existing child element.

Enter fullscreen mode Exit fullscreen mode

insertAdjacentHTML(): Inserts HTML content at a specified position relative to an e

Enter fullscreen mode Exit fullscreen mode

container.appendChild(newParagraph);

Enter fullscreen mode Exit fullscreen mode

container.insertBefore(newParagraph, heading);

Enter fullscreen mode Exit fullscreen mode

container.insertAdjacentHTML('afterbegin', '<p>See Me After Main Begin</p>');

Enter fullscreen mode Exit fullscreen mode

container.insertAdjacentHTML ('afterend', '<p>See Me After Main End</p>');

Enter fullscreen mode Exit fullscreen mode

Ontainer.insertAdjacentHTML('beforebegin', '<p>See Me Before Main Begin</p>');

Enter fullscreen mode Exit fullscreen mode

container.insertAdjacentHTML ('beforeend', '<p>See Me Before Main End</p>');

Enter fullscreen mode Exit fullscreen mode

container.insertAdjacentHTML(

'beforeend",

<p style="padding-top: 20px;">See Me Before Main End</p>'

);


Enter fullscreen mode Exit fullscreen mode

query Selector

//ID irundhalum class ahh irundhalum select pannum

Selecting elements using querySelector (work both class on id more flexibility



      Var name                           //I'd symbol
const subTitle = document.querySelector('#subtitle');
                                        // class . Symbol
console.log(subTitle); // tags text print aagum

console.log(subTitle.textContent);  // text only

setTimeout(() {

subTitle.textContent = "New Subtitle from JS';

}, 4000); // 4s wait pannum apram style apply pannum. 

Enter fullscreen mode Exit fullscreen mode

querySelectorAll

Selecting multiple elements using querySelectorAll


const listItemsQuery = document.querySelectorAll('.list-item');

console.log(listItems Query);

Enter fullscreen mode Exit fullscreen mode

Loop :

// node irukuradha array vaa convert panna avasiyam illai...apdiyea wrk pannalaam inga.


listItemsQuery.forEach((item, index) => {

item.textContent = Modified Item ${index + 2);

});

Enter fullscreen mode Exit fullscreen mode

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

AWS Security LIVE! Stream

Level up your security knowledge and skills

Join AWS Security LIVE! for expert insights on threat detection, infrastructure protection, and more. Hosted by AWS experts and AWS Partners. No sales pitches, just deep dives!

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay