Skip to content

Commit c91502c

Browse files
bbauskabbauska
authored
Update README.md
1 parent f547408 commit c91502c

1 file changed

Lines changed: 124 additions & 3 deletions

File tree

‎README.md‎

Lines changed: 124 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,17 @@ properties for this are <b><mark>innerHTML</mark></b> and <b><mark>textContent:<
3636
</body>
3737
```
3838

39+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
40+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 01. change content using innerHTML ~~~~~~~~~~~~~~~~-->
41+
<a href=""
42+
target="_blank" rel="noopener noreferrer">
43+
<img class="displayed"
44+
src="./images/image001.gif?raw=true"
45+
loading="lazy"
46+
style="width:40%;"
47+
title=""
48+
alt="." />
49+
</a>
3950
<!-- image001.gif -->
4051
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
4152
<h4>In this example</h4>
@@ -103,7 +114,17 @@ This is helpful for styling or applying animations.</p>
103114
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
104115
<h4>Output:</h4>
105116
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
106-
<!-- image002.gif -->
117+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
118+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 02. manipulate class ~~~~~~~~~~~~~~~~-->
119+
<a href=""
120+
target="_blank" rel="noopener noreferrer">
121+
<img class="displayed"
122+
src="./images/image002.gif?raw=true"
123+
loading="lazy"
124+
style="width:40%;"
125+
title=""
126+
alt="." />
127+
</a><!-- image002.gif -->
107128
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
108129
<h4>In this example</h4>
109130
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
@@ -277,6 +298,17 @@ element.classList.add("className")
277298
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
278299
<h4>Output:</h4>
279300
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
301+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
302+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 03. manipulate class ~~~~~~~~~~~~~~~~-->
303+
<a href=""
304+
target="_blank" rel="noopener noreferrer">
305+
<img class="displayed"
306+
src="./images/image003.gif?raw=true"
307+
loading="lazy"
308+
style="width:40%;"
309+
title=""
310+
alt="." />
311+
</a>
280312
<!-- image003.gif -->
281313
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
282314
<h3>Using <b><mark>className</mark></b> Property</h3>
@@ -328,6 +360,17 @@ add another one to it or else it will append our new class to it.
328360
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
329361
<h4>Output:</h4>
330362
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
363+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
364+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 04. ~~~~~~~~~~~~~~~~-->
365+
<a href=""
366+
target="_blank" rel="noopener noreferrer">
367+
<img class="displayed"
368+
src="./images/image004.gif?raw=true"
369+
loading="lazy"
370+
style="width:40%;"
371+
title=""
372+
alt="." />
373+
</a>
331374
<!-- image004.gif -->
332375
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
333376
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
@@ -389,6 +432,17 @@ This method selects a single element by its unique ID attribute.
389432
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
390433
<h4>Output:</h4>
391434
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
435+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
436+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 05. ~~~~~~~~~~~~~~~~-->
437+
<a href=""
438+
target="_blank" rel="noopener noreferrer">
439+
<img class="displayed"
440+
src="./images/image005.png?raw=true"
441+
loading="lazy"
442+
style="width:40%;"
443+
title=""
444+
alt="." />
445+
</a>
392446
<!-- image005.png -->
393447
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
394448
<h3>Using <b><mark>getElementsByClassName</mark></b></h3>
@@ -431,6 +485,17 @@ with the specified class name.</p>
431485
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
432486
<h4>Output:</h4>
433487
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
488+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
489+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 06. ~~~~~~~~~~~~~~~~-->
490+
<a href=""
491+
target="_blank" rel="noopener noreferrer">
492+
<img class="displayed"
493+
src="./images/image006.png?raw=true"
494+
loading="lazy"
495+
style="width:40%;"
496+
title=""
497+
alt="." />
498+
</a>
434499
<!-- image006.png -->
435500
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
436501
<h3>Using <b><mark>getElementsByTagName</mark></b></h3>
@@ -473,6 +538,17 @@ specified tag name.</p>
473538
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
474539
<h4>Output:</h4>
475540
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
541+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
542+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 07. ~~~~~~~~~~~~~~~~-->
543+
<a href=""
544+
target="_blank" rel="noopener noreferrer">
545+
<img class="displayed"
546+
src="./images/image007.png?raw=true"
547+
loading="lazy"
548+
style="width:40%;"
549+
title=""
550+
alt="." />
551+
</a>
476552
<!-- image007.png -->
477553
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
478554
<h3>Using querySelector</h3>
@@ -510,9 +586,21 @@ one element.</p>
510586
511587
</html>
512588
```
513-
Output:
514-
<!-- image008 -->
515589

590+
<h4>Output:</h4.
591+
592+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
593+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 08. ~~~~~~~~~~~~~~~~-->
594+
<a href=""
595+
target="_blank" rel="noopener noreferrer">
596+
<img class="displayed"
597+
src="./images/image008.png?raw=true"
598+
loading="lazy"
599+
style="width:40%;"
600+
title=""
601+
alt="." />
602+
</a>
603+
<!-- image008.png -->
516604
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
517605
<h3>Using querySelectorAll</h3>
518606
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
@@ -556,6 +644,17 @@ all elements that match the specified CSS selector.</p>
556644
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
557645
<h4>Output:</h4>
558646
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
647+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
648+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 09. ~~~~~~~~~~~~~~~~-->
649+
<a href=""
650+
target="_blank" rel="noopener noreferrer">
651+
<img class="displayed"
652+
src="./images/image009.png?raw=true"
653+
loading="lazy"
654+
style="width:40%;"
655+
title=""
656+
alt="." />
657+
</a>
559658
<!-- image009.png -->
560659
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
561660
<h2>How to get all ID of the DOM elements with JavaScript?</h2>
@@ -617,6 +716,17 @@ has an ID. If it has an ID then push it into the array.
617716
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
618717
<h4>Output:</h4>
619718
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
719+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
720+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 10. ~~~~~~~~~~~~~~~~-->
721+
<a href=""
722+
target="_blank" rel="noopener noreferrer">
723+
<img class="displayed"
724+
src="./images/image010.gif?raw=true"
725+
loading="lazy"
726+
style="width:40%;"
727+
title=""
728+
alt="." />
729+
</a>
620730
<!-- image010.gif -->
621731
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
622732
<h3>Approach 2:</h3>
@@ -674,6 +784,17 @@ has an ID. If it has an ID then push it into the array.
674784
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
675785
<h4>Output:</h4>
676786
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
787+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
788+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 11. ~~~~~~~~~~~~~~~~-->
789+
<a href=""
790+
target="_blank" rel="noopener noreferrer">
791+
<img class="displayed"
792+
src="./images/image011.gif?raw=true"
793+
loading="lazy"
794+
style="width:40%;"
795+
title=""
796+
alt="." />
797+
</a>
677798
<!-- image011.gif -->
678799
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
679800
<h2>JavaScript – How to Get the Data Attributes of an Element?</h2>

0 commit comments

Comments
 (0)