Difference between revisions of "DOM Changing elements"
Jump to navigation
Jump to search
(16 intermediate revisions by the same user not shown) | |||
Line 11: | Line 11: | ||
</div> | </div> | ||
</pre> | </pre> | ||
== | 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== | |||
<div class='qu'> | <div class='qu'> | ||
If the element you want to change has an id you can use '''getElementById''' | |||
*The html above has a div with id "countries" | |||
<div class=imper>Change the countries div to have silver background color.</div> | |||
<pre class='usr'> | <pre class='usr'> | ||
let e = document.getElementById('countries'); | let e = document.getElementById('countries'); | ||
e.style. | e.style.backgroundColor = 'pink'; | ||
</pre> | </pre> | ||
<pre class='ans'> | <pre class='ans'> | ||
let e = document.getElementById('countries'); | let e = document.getElementById('countries'); | ||
e.style. | e.style.backgroundColor = 'silver'; | ||
</pre> | |||
</div> | |||
==Find an element and change it== | |||
<div class='qu'> | |||
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''' | |||
<div class=imper>Make the width of the first img 50px</div> | |||
<pre class='usr'> | |||
document.querySelector('img').style.width = '75px'; | |||
</pre> | |||
<pre class='ans'> | |||
document.querySelector('img').style.width = '50px'; | |||
</pre> | |||
</div> | |||
==Find many elements, change them all== | |||
<div class='qu'> | |||
You can use document.querySelectorAll to lots of elements. | |||
*You can visit every element in the list with forEach | |||
<div class=imper>Make the width of all img 50px</div> | |||
<pre class='usr'> | |||
document.querySelector('img').style.width = '75px'; | |||
</pre> | |||
<pre class='ans'> | |||
document.querySelectorAll('img').forEach(i=>{ | |||
i.style.width = '50px'; | |||
}); | |||
</pre> | |||
</div> | |||
==Remove France== | |||
<div class='qu'> | |||
The element with id '''fr''' must go. | |||
<div class=imper>Use .remove() to remove France</div> | |||
<pre class='usr'> | |||
</pre> | |||
<pre class='ans'> | |||
document.querySelector('#fr').remove(); | |||
</pre> | </pre> | ||
</div> | </div> | ||
== | ==Swap the order== | ||
<div class='qu'> | <div class='qu'> | ||
You can | 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 | |||
<div class=imper>Use .append() to put France at the end</div> | |||
<pre class='usr'> | <pre class='usr'> | ||
</pre> | </pre> | ||
<pre class='ans'> | <pre class='ans'> | ||
document.getElementById('countries') | |||
.append(document.getElementById('fr')); | |||
</pre> | </pre> | ||
</div> | </div> |
Revision as of 17:59, 7 September 2021
<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
Make the width of all img 50px
document.querySelector('img').style.width = '75px';
document.querySelectorAll('img').forEach(i=>{ i.style.width = '50px'; });
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'));