DOM Changing elements - Revision history

Andr3w: /* Give the flags borders, make the heading bigger */

2022-08-14T16:32:52Z

Give the flags borders, make the heading bigger

← Older revision		Revision as of 16:32, 14 August 2022
Line 88:		Line 88:
	<div class='qu'>		<div class='qu'>
	* A pattern such as <code>#countries>div>div</code> will match the node containing the country name		* A pattern such as <code>#countries>div>div</code> will match the node containing the country name
			* You can use <code>i.style.fontSize = '200%'</code> to make the text in element <code>i</code> twice the size.
	<div class=imper>Make the width of all img 50px, make the border solid</div>		<div class=imper>Make the width of all img 50px, make the border solid</div>

2022-08-14T16:31:39Z

Give the flags borders, make the heading bigger

← Older revision		Revision as of 16:31, 14 August 2022
Line 87:		Line 87:
	==Give the flags borders, make the heading bigger==		==Give the flags borders, make the heading bigger==
	<div class='qu'>		<div class='qu'>
			* A pattern such as <code>#countries>div>div</code> will match the node containing the country name
	<div class=imper>Make the width of all img 50px, make the border solid</div>		<div class=imper>Make the width of all img 50px, make the border solid</div>

Line 94:		Line 95:
	i.style.border = 'solid';		i.style.border = 'solid';
	});		});

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

	</pre>		</pre>
	<pre class='ans'>		<pre class='ans'>
Line 104:		Line 100:
	i.style.width = '50px';		i.style.width = '50px';
	i.style.border = 'solid';		i.style.border = 'solid';
			});

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

2022-08-14T16:29:55Z

Give the flags borders

@@ Line 76: / Line 76: @@
 <pre class='usr'>
 </pre>
 <pre class='ans'>

2022-08-14T16:23:24Z

Find many elements, change them all

@@ Line 67: / Line 67: @@
 document.querySelectorAll('img').forEach(i=>{
    i.style.width = '50px';
 });
 </pre>

2022-08-14T16:21:08Z

Find many elements, change them all

← Older revision		Revision as of 16:21, 14 August 2022
Line 62:		Line 62:
	document.querySelectorAll('img').forEach(i =>{		document.querySelectorAll('img').forEach(i =>{
	i.style.width = '75px';		i.style.width = '75px';
	}		})
	</pre>		</pre>
	<pre class='ans'>		<pre class='ans'>

2022-08-14T16:17:12Z

Find many elements, change them all

← Older revision		Revision as of 16:17, 14 August 2022
Line 60:		Line 60:

	<pre class='usr'>		<pre class='usr'>
	document.querySelectorAll('img').forEach(x =>{		document.querySelectorAll('img').forEach(i =>{
	x.style.width = '75px';		i.style.width = '75px';
	}		}
	</pre>		</pre>

2022-08-14T16:16:18Z

Find many elements, change them all

← Older revision		Revision as of 16:16, 14 August 2022
Line 56:		Line 56:
	You can use document.querySelectorAll to lots of elements.		You can use document.querySelectorAll to lots of elements.
	*You can visit every element in the list with forEach		*You can visit every element in the list with forEach
			*The default program changes every img element
	<div class=imper>Make the width of all img 50px</div>		<div class=imper>Make the width of all img 50px</div>

	<pre class='usr'>		<pre class='usr'>
	document.~~querySelector~~('img').style.width = '75px';		document.querySelectorAll('img').forEach(x =>{
			x.style.width = '75px';
			}
	</pre>		</pre>
	<pre class='ans'>		<pre class='ans'>

2021-09-07T17:59:18Z

Remove France

@@ Line 77: / Line 77: @@
 <pre class='ans'>
 document.querySelector('#fr').remove();
 </pre>
 </div>

2021-09-07T17:56:17Z

Remove an France

← Older revision		Revision as of 17:56, 7 September 2021
Line 68:		Line 68:
	</div>		</div>

	==Remove an France==		==Remove France==
	<div class='qu'>		<div class='qu'>
			The element with id '''fr''' must go.
	<div class=imper>Use .remove() to remove France</div>		<div class=imper>Use .remove() to remove France</div>

2021-09-07T17:55:03Z

Remove an France

← Older revision		Revision as of 17:55, 7 September 2021
Line 70:		Line 70:
	==Remove an France==		==Remove an France==
	<div class='qu'>		<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>Use .remove() to remove France</div>
	<div class=imper>~~Make the width of all img 50px~~</div>

	<pre class='usr'>		<pre class='usr'>