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>

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.

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

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

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.

• 'img' will match a <img/> element
• '#fr' will match an element with id fr

Make the width of the first img 50px

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

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

Find many elements, change them all

You can use document.querySelectorAll to lots of elements.

• You can visit every element in the list with forEach
• The default program changes every img element

Make the width of all img 50px

document.querySelectorAll('img').forEach(i =>{
  i.style.width = '75px';
})

document.querySelectorAll('img').forEach(i=>{
  i.style.width = '50px';
});

Give the flags borders

Make the width of all img 50px, make the border solid

document.querySelectorAll('img').forEach(i=>{
  i.style.width = '50px';
  i.style.border = 'solid';
});

Give the flags borders, make the heading bigger

• A pattern such as #countries>div>div will match the node containing the country name
• You can use i.style.fontSize = '200%' to make the text in element i twice the size.

Make the width of all img 50px, make the border solid

document.querySelectorAll('img').forEach(i=>{
  i.style.width = '50px';
  i.style.border = 'solid';
});

document.querySelectorAll('img').forEach(i=>{
  i.style.width = '50px';
  i.style.border = 'solid';
});

document.querySelectorAll('#countries>div>div').forEach(i=>{
  i.style.fontSize = '200%';
});

Remove France

The element with id fr must go.

Use .remove() to remove France

document.querySelector('#fr').remove();

Swap the order

You can use append to reinsert an element.

• You must find the list of countries
• You must find the target country
• You must append the target to the list

Use .append() to put France at the end

document.getElementById('countries')
  .append(document.getElementById('fr'));