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 di "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

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';