Skip to content

Commit eb76ab5

Browse files
bbauskabbauska
authored
Update index.html
1 parent 588606d commit eb76ab5

1 file changed

Lines changed: 79 additions & 59 deletions

File tree

‎index.html‎

Lines changed: 79 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,37 @@
44
<html lang="en">
55
<head>
66
<meta charset="utf-8" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
88
<meta name="title' content="DOM (Document Object Model)" />
9-
<meta name="description" content="A DOM (Document Object Model) tree built out of websites I've
10-
built for people I love." />
9+
<meta name="keywords" content="steak,Steak,YouTube,Sonic,sonic,SONIC,Silus,Gaming,World,
10+
Silus Gaming World,Luccas Neto,T-Series,SET India,Cocomelon,Mr Beast,MrBeast,Beast,CE1,C-E-1,CE-1,
11+
MRBEAST,BEAST,Silus Gaming World,Silus,Silus Spider,Nick AR,Nick,NY,NYNick,New York Nick,
12+
NY Nick,UR Cristiano,UR,Cristiano,Kids Dima Show,Vlad and Niki,Luisito Comunica,Bright Side,
13+
Zee TV,Dude Perfect,Tips Official,Tips Official, FNAF,Five Nights at Freddies,The Music Company,
14+
PewDiePie,5 minute crafts,A4,Sambucha,Sam & Colby,Sam&ColbyReacts,Juice World,Ray William
15+
Johnson,FGTV,KaicenatLive,IShowSpeed,Jelly,DanTDM,KSI,Logan Paul,JackSucksAtLife,
16+
PackGOD,JakePaul,Jake,Paul Jake Paul,SamGaming01,Veshreny,WWE,WorldWrestlingEntertainment,
17+
Smosh,DadsSpeed,TopperGuild,InternetAnarchist,GuavaJuice,Fortnite Youtubers,Sypherpk,LiveSPEEDY,
18+
AdenRoss,Preston,JohnnieJuilbert,YouTube Movies,AnnoyingOrange,JackSepticeye,JackFilms,BBNo$,
19+
Unspeakable,MarkRober,TheFilmTheorist,TheGameTheorist,Minecraft,TheBoys,JTMusic,DAFUQBoom!?,
20+
AIMIN,Robby,BrentTV,EYStream,Fortnite,Ninja,SunnyV2,N30N,SamFrank,Dream,Technoblade,
21+
RyanTrhan,Stellar,DJCook,AnthonyMadia,AnthonyIlla,SmoshGaming,SmoshPit,SmoshCast,Fred,cellardoor,
22+
Brian's Blog,Cellar Door,SML Theorist,Theorist,Silus Spider,#SilusGW,#SilusGamingWorld,#Silus-GW,
23+
#Silus-Gaming-World,silas,#silas,#silasgw,silusgw,#silasgamingworld,silasgamingworld,#silusgwfnaf,
24+
#silus-gw,#silusthesnake,#silusalienufo,#supersilus,#evilsilus,#youtubesilus,#silas,silas,puppetsilus,
25+
robotsilus,aisilus,silus-et,#silus-et,dotexesilus,#dotexesilus,silusgwminecraft,#silusgamingworldminecraft,
26+
silusgamingworldfnaf,#silusgamingworldfnaf,silusgametrailers,dotcomsilus,puppetsilus,robloxsilus,
27+
robloxsilusgamingworld,silusgamingworldfortnite,silusgamingworldleaugeoflegends,silusgamingworldfnafvhs,
28+
silusgwfnafvhs,supersilus,silussquadmembers,silus-squad-members,silusthesnake,silusgwespanol,
29+
silusspiderespanol,RyanTrhan,Stellar,DJCook,AnthonyMadia,AnthonyIlla,SmoshGaming,SmoshPit,SmoshCast,
30+
Fred,cellardoor,BriansBlog,CellarDoor,Silus,GW,Gaming,World,SilusGamingWorld,SilusGW,#Silus-GW,#cellardoor,
31+
bbauska,#SilusGamingWorld,#SilusGW,gluttony,selfishness,#bbauska,#silas,#silys,#sylus,#sylas,#sylusgw,
32+
#silasGW,#silasgamingworld" />
33+
<meta name="description" content="How to utilize and maximize usage of the DOM - Document Object Model." />
1134
<meta name="author" content="Brian Bauska" />
35+
<title>Silus Gaming World's Blog</title>
36+
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
1237
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
13-
1438
<title>DOM (Document Object Model)</title>
1539

1640
<link href="/css/styles.css" rel="stylesheet" media="screen" />
@@ -64,22 +88,22 @@
6488
<h1 id="toc">Table of Contents - DOM (Document Object Model)</h1>
6589
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
6690
<ol>
67-
<li><a href="#D01">01. JavaScript - How to Manipulate DOM Elements?</a></li>
68-
<li><a href="#D02">02. How to Add a <b><mark>Class</mark></b> to <b><mark>DOM Element</mark></b> in JavaScript?</a></li>
69-
<li><a href="#D03">03. How to select DOM Elements in JavaScript?</a></li>
70-
<li><a href="#D04">04. How to get all ID's of the DOM elements with JavaScript?</a></li>
71-
<li><a href="#D05">05. JavaScript – How to Get the Data Attributes of an Element?</a></li>
72-
<li><a href="#D06">06. How To Get Element By Class Name In JavaScript?</a></li>
73-
<li><a href="#D07">07. How to Get Value by Class Name using JavaScript?</a></li>
74-
<li><a href="#D08">08. How to Get Domain Name From URL in JavaScript?</a></li>
75-
<li><a href="#D09">09. How to Get Protocol, Domain and Port from URL using JavaScript?</a></li>
76-
<li><a href="#D10">10. How to Extract the Host Name from URL using JavaScript?</a></li>
77-
<li><a href="#D11">11. How to Get the Current URL using JavaScript?</a></li>
78-
<li><a href="#D12">12. How to Get URL Parameters using JavaScript?</a></li>
79-
<li><a href="#D13">13. How to Parse URL using JavaScript?</a></li>
80-
<li><a href="#D14">14. Manipulating HTML Elements with JavaScript</a></li>
81-
<li><a href="#D15">15. How to use <b><mark>innerHTML</mark></b> in JavaScript?</a></li>
82-
<li><a href="#D16">16. JavaScript <b><mark>innerHTML</mark></b></a></li>
91+
<li><a href="#D01">JavaScript - How to Manipulate DOM Elements?</a></li>
92+
<li><a href="#D02">How to Add a <b><mark>Class</mark></b> to <b><mark>DOM Element</mark></b> in JavaScript?</a></li>
93+
<li><a href="#D03">How to select DOM Elements in JavaScript?</a></li>
94+
<li><a href="#D04">How to get all ID's of the DOM elements with JavaScript?</a></li>
95+
<li><a href="#D05">JavaScript – How to Get the Data Attributes of an Element?</a></li>
96+
<li><a href="#D06">How To Get Element By Class Name In JavaScript?</a></li>
97+
<li><a href="#D07">How to Get Value by Class Name using JavaScript?</a></li>
98+
<li><a href="#D08">How to Get Domain Name From URL in JavaScript?</a></li>
99+
<li><a href="#D09">How to Get Protocol, Domain and Port from URL using JavaScript?</a></li>
100+
<li><a href="#D10">How to Extract the Host Name from URL using JavaScript?</a></li>
101+
<li><a href="#D11">How to Get the Current URL using JavaScript?</a></li>
102+
<li><a href="#D12">How to Get URL Parameters using JavaScript?</a></li>
103+
<li><a href="#D13">How to Parse URL using JavaScript?</a></li>
104+
<li><a href="#D14">Manipulating HTML Elements with JavaScript</a></li>
105+
<li><a href="#D15">How to use <b><mark>innerHTML</mark></b> in JavaScript?</a></li>
106+
<li><a href="#D16">JavaScript <b><mark>innerHTML</mark></b></a></li>
83107
</ol>
84108
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
85109
<h1 align="center">DOM</h1>
@@ -1670,32 +1694,32 @@ <h4>Output:</h4>
16701694
<li><b>Before</b> Clicking the button:</li>
16711695
</ul>
16721696
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
1673-
<!--~~~~~~~~~~~~~~~~~~~~~~~ 37. ~~~~~~~~~~~~~~~~-->
1697+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 37. get protocol, domain, and port from url ~~~~~~~~~~~~~~~~~~~-->
16741698
<p align="center" >
16751699
<a href=""
16761700
target="_blank" rel="noopener noreferrer">
16771701
<img class="displayed"
16781702
src="./images/image037.png?raw=true"
16791703
loading="lazy"
16801704
style="width:40%;"
1681-
title=""
1682-
alt="." />
1705+
title="Get protocol, domain, and port from url"
1706+
alt="Get protocol, domain, and port from url." />
16831707
</a>
16841708
</p><!-- image037.png -->
16851709
<ul>
16861710
<li><b>After</b> Clicking the button:</li>
16871711
</ul>
16881712
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
1689-
<!--~~~~~~~~~~~~~~~~~~~~~~~ 38. ~~~~~~~~~~~~~~~~-->
1713+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 38. get protocol, domain, and port from url ~~~~~~~~~~~~~~~~~~~-->
16901714
<p align="center" >
16911715
<a href=""
16921716
target="_blank" rel="noopener noreferrer">
16931717
<img class="displayed"
16941718
src="./images/image038.png?raw=true"
16951719
loading="lazy"
16961720
style="width:40%;"
1697-
title=""
1698-
alt="." />
1721+
title="Get protocol, domain, and port from url"
1722+
alt="Get protocol, domain, and port from url." />
16991723
</a>
17001724
</p>
17011725
<!-- image038.png -->
@@ -1796,49 +1820,45 @@ <h4>Example: In this example, we will ask for the URL to the user and then will
17961820
&lt;/head&gt;
17971821

17981822
&lt;body&gt;
1799-
&lt;h1 style="color: green;"&gt;GeeksforGeeks&lt;/h1&gt;
1800-
&lt;b&gt;Extracting URL&lt;/b&gt;
1801-
&lt;br&gt;&lt;br&gt;
1802-
&lt;form name="f1"&gt;
1803-
&lt;input type="text" name="txt" placeholder="Paste URL" /&gt;
1804-
&lt;input type="button" value="click" onclick="url2()" /&gt;
1805-
&lt;/form&gt;
1806-
&lt;script&gt;
1807-
function url2() {
1808-
1809-
let url3 = document.f1.txt.value;
1810-
1811-
let j = url3.indexOf("://");
1812-
1813-
let host = "";
1814-
1815-
for (i = j + 3; i &lt; url3.length; i++) {
1816-
if (url3.charAt(i) != '/') {
1817-
host = host + "" + url3.charAt(i);
1818-
} else {
1819-
break;
1820-
}
1821-
}
1822-
document.write(host);
1823+
&lt;h1 style="color: green;"&gt;GeeksforGeeks&lt;/h1&gt;
1824+
&lt;b&gt;Extracting URL&lt;/b&gt;
1825+
&lt;br&gt;&lt;br&gt;
1826+
&lt;form name="f1"&gt;
1827+
&lt;input type="text" name="txt" placeholder="Paste URL" /&gt;
1828+
&lt;input type="button" value="click" onclick="url2()" /&gt;
1829+
&lt;/form&gt;
1830+
&lt;script&gt;
1831+
function url2() {
1832+
let url3 = document.f1.txt.value;
1833+
let j = url3.indexOf("://");
1834+
let host = "";
1835+
for (i = j + 3; i &lt; url3.length; i++) {
1836+
if (url3.charAt(i) != '/') {
1837+
host = host + "" + url3.charAt(i);
1838+
} else {
1839+
break;
18231840
}
1824-
&lt;/script&gt;
1841+
}
1842+
document.write(host);
1843+
}
1844+
&lt;/script&gt;
18251845
&lt;/body&gt;
18261846

18271847
&lt;/html&gt;
18281848
</pre>
18291849
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
18301850
<h4>Output:</h4>
18311851
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
1832-
<!--~~~~~~~~~~~~~~~~~~~~~~~ 40. ~~~~~~~~~~~~~~~~-->
1852+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 40. get/display url parameters ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
18331853
<p align="center" >
18341854
<a href=""
18351855
target="_blank" rel="noopener noreferrer">
18361856
<img class="displayed"
18371857
src="./images/image040.gif?raw=true"
18381858
loading="lazy"
18391859
style="width:40%;"
1840-
title=""
1841-
alt="." />
1860+
title="Get/display url parameters"
1861+
alt="Get/display url parameters." />
18421862
</a>
18431863
</p>
18441864
<!-- image040.gif -->
@@ -1979,20 +1999,19 @@ <h4>Example: In this example we retrieves URL parameters using JavaScript. It sp
19791999
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
19802000
<h4>Output:</h4>
19812001
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
1982-
<!--~~~~~~~~~~~~~~~~~~~~~~~ 41. ~~~~~~~~~~~~~~~~-->
2002+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~ 41. get url parameters' key and value ~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
19832003
<p align="center" >
19842004
<a href=""
19852005
target="_blank" rel="noopener noreferrer">
19862006
<img class="displayed"
19872007
src="./images/image041.gif?raw=true"
19882008
loading="lazy"
19892009
style="width:40%;"
1990-
title=""
1991-
alt="." />
2010+
title="Get url parameters' key and value"
2011+
alt="Get url parameters' key and value." />
19922012
</a>
19932013
</p>
19942014
<!-- image041.gif -->
1995-
19962015
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
19972016
<h3 id="D12-02">02. Method 2: Separating and accessing each parameter pair</h3>
19982017
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
@@ -2086,7 +2105,6 @@ <h2 id="D13">13. How to parse URL using JavaScript?</h2>
20862105
<h4>Method 1: In this method, we will use <b><mark>createElement()</mark></b> method to create a
20872106
HTML element, anchor tag and then use it for parsing the given URL.</h4>
20882107
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
2089-
20902108
<pre>
20912109
// Store the URL into variable
20922110
var url = "https://geeksforgeeks.org/pathname/?search=query";
@@ -2174,6 +2192,7 @@ <h2 id="D14">14. Manipulating HTML Elements with JavaScript</h2>
21742192
<li>Using the element's tag name: We can use <b><mark>document.getElementsByTagName()</mark></b>
21752193
to access all elements with a particular tag name.</li>
21762194
</ul>
2195+
21772196
<p>Accessing the properties of the elements: Once we have identified the HTML element that we
21782197
want to manipulate, we can access its properties using JavaScript. For example, to access the
21792198
text content of an element, we can use the <b><mark>innerHTML</mark></b> property. Similarly, we can access the
@@ -2196,6 +2215,7 @@ <h4>Step 1: Identify the Element You Want to Manipulate:</h4>
21962215
<p>The first step in working with HTML elements in JavaScript is to identify the element you
21972216
want to manipulate. There are several ways to do this, depending on the specific element
21982217
you're trying to access. Here are some common methods:</p>
2218+
21992219
<ul>
22002220
<li><b><mark>getElementById()</mark></b> Method: Use this method to access an element with a
22012221
specific ID. IDs should be unique within an HTML document, so this method will always return

0 commit comments

Comments
 (0)