DOM Changing elements

 
 <div id='countries'> 
  <div id='fr'>
	<div>France</div>
	<img src='/flags/fr.gif'/>
  </div>
  <div id='fi'>
	<div>Finland</div>
	<img src='/flags/fi.gif'/>
  </div>
 </div>

In these examples the web page contains the following content.

<div id='countries'> 
 <div id='fr'>
   <div>France</div>
   <img src='/flags/fr.gif'/>
 </div>
 <div id='fi'>
   <div>Finland</div>
   <img src='/flags/fi.gif'/>
 </div>
</div>

1) Change an element based on id

If the element you want to change has an id you can use getElementById

• The html above has a div with id "countries"

Change the countries div to have silver background color.

Input

let e = document.getElementById('countries'); e.style.backgroundColor = 'pink';

xxxxxxxxxx

 

1

let e = document.getElementById('countries');

2

e.style.backgroundColor = 'pink';

3

​

Go reset

Output

let e = document.getElementById('countries');
e.style.backgroundColor = 'pink';

let e = document.getElementById('countries');
e.style.backgroundColor = 'silver';

2) Find an element and change it

You can use document.querySelector to find elements. The pattern given is very like the patterns you use in CSS.

Make the width of the first img 50px

Input

document.querySelector('img').style.width = '75px';

xxxxxxxxxx

 

1

document.querySelector('img').style.width = '75px';

2

​

Go reset

Output

document.querySelector('img').style.width = '75px';

document.querySelector('img').style.width = '50px';