Difference between revisions of "DOM Changing elements"

From ProgZoo
Jump to navigation Jump to search
(20 intermediate revisions by the same user not shown)
Line 3: Line 3:
   <div id='fr'>
   <div id='fr'>
<div>France</div>
<div>France</div>
<img src='flags/fr.gif'/>
<img src='/flags/fr.gif'/>
   </div>
   </div>
   <div id='fi'>
   <div id='fi'>
<div>Finland</div>
<div>Finland</div>
<img src='flags/fi.gif'/>
<img src='/flags/fi.gif'/>
   </div>
   </div>
  </div>
  </div>
</pre>
</pre>
==Create Content==
In these examples the web page contains the following content.
&lt;div id='countries'>
  &lt;div id='fr'>
    &lt;div>France&lt;/div>
    &lt;img src='/flags/fr.gif'/>
  &lt;/div>
  &lt;div id='fi'>
    &lt;div>Finland&lt;/div>
    &lt;img src='/flags/fi.gif'/>
  &lt;/div>
&lt;/div>
==Change an element based on id==
<div class='qu'>
<div class='qu'>
You can create a div element an set the content.  
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'>
let e = document.getElementById('countries');
e.style.backgroundColor = 'pink';
</pre>
<pre class='ans'>
let e = document.getElementById('countries');
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 &lt;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>


We use the document method '''createElement''' and the DOM node method '''append'''
<pre class='usr'>
<pre class='usr'>
let e = document.createElement('div');
e.innerHTML = 'Hello';
document.body.append(e);
</pre>
</pre>
<pre class='ans'>
<pre class='ans'>
let e = document.createElement('div');
document.querySelector('#fr').remove();
e.innerHTML = 'Hello world';
document.body.append(e);
</pre>
</pre>
</div>
</div>


==Create img==
==Swap the order==
<div class='qu'>
<div class='qu'>
You can create a '''img''' element an set the '''src'''.
You can use append to reinsert an element.
In this example you must set the '''src''' and the '''style''' of the new element '''a'''.
*You must find the list of countries
a.style = 'width:100px;border:solid;';
*You must find the target country
These are CSS properties.
*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'>
let a = document.createElement('img');
a.src = '/flags/fr.png';
document.body.append(a);
</pre>
</pre>
<pre class='ans'>
<pre class='ans'>
let a = document.createElement('img');
document.getElementById('countries')
a.src = '/flags/fr.png';
  .append(document.getElementById('fr'));
a.style = 'width:100px;border:solid;';
document.body.append(a);
</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'));