Skip to content

Commit 396a4a0

Browse files
bbauskabbauska
authored
Update index.html
1 parent eb76ab5 commit 396a4a0

1 file changed

Lines changed: 53 additions & 54 deletions

File tree

‎index.html‎

Lines changed: 53 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<html lang="en">
55
<head>
66
<meta charset="utf-8" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
8-
<meta name="title' content="DOM (Document Object Model)" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8+
<meta name="title' content="DOM (Document Object Model) Utilization">
99
<meta name="keywords" content="steak,Steak,YouTube,Sonic,sonic,SONIC,Silus,Gaming,World,
1010
Silus Gaming World,Luccas Neto,T-Series,SET India,Cocomelon,Mr Beast,MrBeast,Beast,CE1,C-E-1,CE-1,
1111
MRBEAST,BEAST,Silus Gaming World,Silus,Silus Spider,Nick AR,Nick,NY,NYNick,New York Nick,
@@ -21,43 +21,42 @@
2121
RyanTrhan,Stellar,DJCook,AnthonyMadia,AnthonyIlla,SmoshGaming,SmoshPit,SmoshCast,Fred,cellardoor,
2222
Brian's Blog,Cellar Door,SML Theorist,Theorist,Silus Spider,#SilusGW,#SilusGamingWorld,#Silus-GW,
2323
#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." />
34-
<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" />
37-
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
38-
<title>DOM (Document Object Model)</title>
39-
40-
<link href="/css/styles.css" rel="stylesheet" media="screen" />
41-
<link href='https://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css' />
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,silusgamingworldleagueoflegends,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,#roblox,roblox">
33+
<meta name="description" content="How to utilize and maximize usage of the DOM - Document Object Model.">
34+
<meta name="author" content="Brian Bauska">
35+
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
36+
<meta http-equiv="X-UA-Compatible" content="chrome=1">
37+
<title>DOM (Document Object Model) Utilization</title>
38+
39+
<link href="/css/styles.css" rel="stylesheet" media="screen">
40+
<link href='https://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
4241

4342
<!-- favicons -->
44-
<link rel="apple-touch-icon" sizes="57x57" href="./images/favicon/apple-icon-57x57.png" />
45-
<link rel="apple-touch-icon" sizes="60x60" href="./images/favicon/apple-icon-60x60.png" />
46-
<link rel="apple-touch-icon" sizes="72x72" href="./images/favicon/apple-icon-72x72.png" />
47-
<link rel="apple-touch-icon" sizes="76x76" href="./images/favicon/apple-icon-76x76.png" />
48-
<link rel="apple-touch-icon" sizes="114x114" href="./images/favicon/apple-icon-114x114.png" />
49-
<link rel="apple-touch-icon" sizes="120x120" href="./images/favicon/apple-icon-120x120.png" />
50-
<link rel="apple-touch-icon" sizes="144x144" href="./images/favicon/apple-icon-144x144.png" />
51-
<link rel="apple-touch-icon" sizes="152x152" href="./images/favicon/apple-icon-152x152.png" />
52-
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-icon-180x180.png" />
53-
<link rel="icon" type="image/png" sizes="192x192" href="./images/favicon/android-icon-192x192.png" />
54-
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon/favicon-32x32.png" />
55-
<link rel="icon" type="image/png" sizes="96x96" href="./images/favicon/favicon-96x96.png" />
56-
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon/favicon-16x16.png" />
57-
<link rel="manifest" href="./manifest.json" />
58-
<meta name="msapplication-TileColor" content="#ffffff" />
59-
<meta name="msapplication-TileImage" content="./images/favicon/ms-icon-144x144.png" />
60-
<meta name="theme-color" content="#ffffff" />
43+
<link rel="apple-touch-icon" sizes="57x57" href="./images/favicon/apple-icon-57x57.png">
44+
<link rel="apple-touch-icon" sizes="60x60" href="./images/favicon/apple-icon-60x60.png">
45+
<link rel="apple-touch-icon" sizes="72x72" href="./images/favicon/apple-icon-72x72.png">
46+
<link rel="apple-touch-icon" sizes="76x76" href="./images/favicon/apple-icon-76x76.png">
47+
<link rel="apple-touch-icon" sizes="114x114" href="./images/favicon/apple-icon-114x114.png">
48+
<link rel="apple-touch-icon" sizes="120x120" href="./images/favicon/apple-icon-120x120.png">
49+
<link rel="apple-touch-icon" sizes="144x144" href="./images/favicon/apple-icon-144x144.png">
50+
<link rel="apple-touch-icon" sizes="152x152" href="./images/favicon/apple-icon-152x152.png">
51+
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-icon-180x180.png">
52+
<link rel="icon" type="image/png" sizes="192x192" href="./images/favicon/android-icon-192x192.png">
53+
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon/favicon-32x32.png">
54+
<link rel="icon" type="image/png" sizes="96x96" href="./images/favicon/favicon-96x96.png">
55+
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon/favicon-16x16.png">
56+
<link rel="manifest" href="./manifest.json">
57+
<meta name="msapplication-TileColor" content="#ffffff">
58+
<meta name="msapplication-TileImage" content="./images/favicon/ms-icon-144x144.png">
59+
<meta name="theme-color" content="#ffffff">
6160
</head>
6261
<body>
6362
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
@@ -89,7 +88,8 @@ <h1 id="toc">Table of Contents - DOM (Document Object Model)</h1>
8988
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
9089
<ol>
9190
<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>
91+
<li><a href="#D02">How to Add a <b><mark>Class</mark></b> to <b><mark>DOM Element</mark></b> in
92+
JavaScript?</a></li>
9393
<li><a href="#D03">How to select DOM Elements in JavaScript?</a></li>
9494
<li><a href="#D04">How to get all ID's of the DOM elements with JavaScript?</a></li>
9595
<li><a href="#D05">JavaScript – How to Get the Data Attributes of an Element?</a></li>
@@ -111,12 +111,11 @@ <h1 align="center">DOM</h1>
111111
<h2 id="D01">01 JavaScript - How to Manipulate DOM Elements?</h2>
112112
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
113113
<p>The <b><mark>DOM</mark></b> stands for the <b><mark>Document Object Model (DOM)</mark></b>,
114-
which allows us to interact with the document and change its structure, style, and content.
115-
We can use the <b><mark>DOM</mark></b> to change the content and style of an HTML element
116-
by changing its properties.</p>
114+
which allows us to interact with the document and change its structure, style, and content. We can
115+
use the <b><mark>DOM</mark></b> to change the content and style of an HTML element by changing its
116+
properties.</p>
117117

118-
<p>We can manipulate or change the <b><mark>DOM elements</mark></b> by using the
119-
following methods:</p>
118+
<p>We can manipulate or change the <b><mark>DOM elements</mark></b> by using the following methods:</p>
120119
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
121120
<h3>1. Change the Content of an Element</h3>
122121
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
@@ -161,7 +160,7 @@ <h4>In this example</h4>
161160
<ul>
162161
<li><b><mark>innerHTML</mark></b> changes the entire content of an element, including HTML tags.
163162
In this case, we replace the content of the first <b><mark>div</mark></b> with bold text
164-
using <b><mark>&lt;strong&gt;</mark></b>.</li>
163+
using <b><mark>&lt;strong&gt;</mark></b>.</li>
165164
<li><b><mark>textContent</mark></b> changes only the text inside the element, ignoring any HTML
166165
tags. The second <b><mark>div</mark></b> is updated with plain text, without any HTML formatting.</li>
167166
<li>The first <b><mark>div</mark></b> shows "This is the original content using <b><mark>innerHTML</mark></b>."</li>
@@ -240,12 +239,12 @@ <h4>In this example</h4>
240239
<ul>
241240
<li>Adding a Class (<b><mark>addClass()</mark></b>): When you click the "Add 'highlight' Class"
242241
button, the highlight class is added to the div element with the id="example". This changes
243-
the text color to red and makes it bold (as defined in the CSS).</li>
242+
the text color to red and makes it bold (as defined in the CSS).</li>
244243
<li>Removing a Class (<b><mark>removeClass()</mark></b>): When you click the "Remove 'bold' Class"
245244
button, the bold class is removed from the div, which removes the bold styling from the text.</li>
246245
<li>Toggling a Class (<b><mark>toggleClass()</mark></b>): When you click the "Toggle 'highlight'
247246
Class" button, the highlight class is either added or removed, depending on whether it's
248-
already present. If the class is present, it will be removed; if not, it will be added.</li>
247+
already present. If the class is present, it will be removed; if not, it will be added.</li>
249248
</ul>
250249
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
251250
<h3>3. Set CSS Styles Using JavaScript</h3>
@@ -924,10 +923,10 @@ <h4>Syntax</h4>
924923

925924
&lt;br /&gt;
926925
&lt;button onclick="myFunction()"&gt;
927-
Get Attributes
928-
&lt;/button&gt;
926+
Get Attributes
927+
&lt;/button&gt;
929928

930-
&lt;p id="result"&gt;&lt;/p&gt;
929+
&lt;p id="result"&gt;&lt;/p&gt;
931930

932931
&lt;script&gt;
933932
let result = document.getElementById("result");
@@ -1792,9 +1791,9 @@ <h4>Output:</h4>
17921791
loading="lazy"
17931792
style="width:40%;"
17941793
title="GeeksforGeeks URL is: https://ide.geeksforgeeks.org/tryit.php,
1795-
hostname is: ide.geeksforgeeks.org"
1794+
hostname is: ide.geeksforgeeks.org"
17961795
alt="GeeksforGeeks URL is: https://ide.geeksforgeeks.org/tryit.php,
1797-
hostname is: ide.geeksforgeeks.org." />
1796+
hostname is: ide.geeksforgeeks.org." />
17981797
</a>
17991798
</p>
18001799
<!-- image039.png -->
@@ -2219,13 +2218,13 @@ <h4>Step 1: Identify the Element You Want to Manipulate:</h4>
22192218
<ul>
22202219
<li><b><mark>getElementById()</mark></b> Method: Use this method to access an element with a
22212220
specific ID. IDs should be unique within an HTML document, so this method will always return
2222-
a single element.</li>
2221+
a single element.</li>
22232222
<li><b><mark>getElementsByClassName()</mark></b> Method: Use this method to access all elements
22242223
with a specific class name. Multiple elements can have the same class name, so this method
2225-
will return a collection of elements.</li>
2224+
will return a collection of elements.</li>
22262225
<li><b><mark>getElementsByTagName()</mark></b> Method: Use this method to access all elements
22272226
with a specific tag name. Multiple elements can have the same tag name, so this method will
2228-
also return a collection of elements.</li>
2227+
also return a collection of elements.</li>
22292228
</ul>
22302229
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
22312230
<h4>Syntax:</h4>

0 commit comments

Comments
 (0)