Skip to content

Commit 7ef79c0

Browse files
bbauskabbauska
authored
Update README.md
1 parent cd4248e commit 7ef79c0

1 file changed

Lines changed: 32 additions & 32 deletions

File tree

‎README.md‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,28 @@ output:
1212
---
1313

1414
<ol>
15-
<li><a href="01">JavaScript - How to Manipulate DOM Elements?</a></li>
16-
<li>How to Add a <b><mark>Class</mark></b> to <b><mark>DOM Element</mark></b> in JavaScript?</li>
17-
<li>How to select DOM Elements in JavaScript?</li>
18-
<li>How to get all ID of the DOM elements with JavaScript?</li>
19-
<li>JavaScript – How to Get the Data Attributes of an Element?</li>
20-
<li>How To Get Element By Class Name In JavaScript?</li>
21-
<li>How to Get Value by Class Name using JavaScript?</li>
22-
<li>How to Get Domain Name From URL in JavaScript?</li>
23-
<li>How to get protocol, domain and port from URL using JavaScript?</li>
24-
<li>How to Extract the Host Name from URL using JavaScript?</li>
25-
<li>How to Get the Current URL using JavaScript?</li>
26-
<li>How to get URL Parameters using JavaScript?</li>
27-
<li>How to parse URL using JavaScript?</li>
28-
<li>Manipulating HTML Elements with JavaScript</li>
29-
<li>How to use innerHTML in JavaScript?</li>
30-
<li>JavaScript innerHTML</li>
15+
<li><a href="D-01">01. JavaScript - How to Manipulate DOM Elements?</a></li>
16+
<li><a href="D-02">02. How to Add a <b><mark>Class</mark></b> to <b><mark>DOM Element</mark></b> in JavaScript?</a></li>
17+
<li><a href="D-03">03. How to select DOM Elements in JavaScript?</a></li>
18+
<li><a href="D-04">04. How to get all ID of the DOM elements with JavaScript?</a></li>
19+
<li><a href="D-05">05. JavaScript – How to Get the Data Attributes of an Element?</a></li>
20+
<li><a href="D-06">06. How To Get Element By Class Name In JavaScript?</a></li>
21+
<li><a href="D-07">07. How to Get Value by Class Name using JavaScript?</a></li>
22+
<li><a href="D-08">08. How to Get Domain Name From URL in JavaScript?</a></li>
23+
<li><a href="D-09">09. How to get protocol, domain and port from URL using JavaScript?</a></li>
24+
<li><a href="D-10">10. How to Extract the Host Name from URL using JavaScript?</a></li>
25+
<li><a href="D-11">11. How to Get the Current URL using JavaScript?</a></li>
26+
<li><a href="D-12">12. How to get URL Parameters using JavaScript?</a></li>
27+
<li><a href="D-13">13. How to parse URL using JavaScript?</a></li>
28+
<li><a href="D-14">14. Manipulating HTML Elements with JavaScript</a></li>
29+
<li><a href="D-15">15. How to use innerHTML in JavaScript?</a></li>
30+
<li><a href="D-16">16. JavaScript innerHTML</a></li>
3131
</ol>
3232
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
3333
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ readme.md of dom ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
3434
<h1 align="center">DOM</h1>
3535
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
36-
<h2 id="#01">01 JavaScript - How to Manipulate DOM Elements?</h2>
36+
<h2 id="#D-01">01 JavaScript - How to Manipulate DOM Elements?</h2>
3737
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
3838
<p>The <b><mark>DOM</mark></b> stands for the <b><mark>Document Object Model (DOM)</mark></b>, which
3939
allows us to interact with the document and change its structure, style, and content. We can use
@@ -267,7 +267,7 @@ console.log(userId); // Outputs: 12345
267267
```
268268

269269
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
270-
<h2>How to Add a <b><mark>Class</mark></b> to <b><mark>DOM Element</mark></b> in JavaScript?</h2>
270+
<h2 id="#D-02">02 How to Add a <b><mark>Class</mark></b> to <b><mark>DOM Element</mark></b> in JavaScript?</h2>
271271
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
272272
Adding a class to a <b><mark>DOM (Document Object Model)</mark></b> element in JavaScript is a fundamental
273273
task that enables developers to dynamically manipulate the appearance and behavior of web pages.
@@ -413,7 +413,7 @@ add another one to it or else it will append our new class to it.
413413
</p>
414414
<!-- image004.gif -->
415415
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
416-
<h2>How to select DOM Elements in JavaScript?</h2>
416+
<h2 id="#D-03">03. How to select DOM Elements in JavaScript?</h2>
417417
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
418418
<p>Selecting <b><mark>DOM (Document Object Model)</mark></b> elements is a fundamental aspect of web
419419
development with JavaScript. It allows developers to interact with and manipulate elements
@@ -706,7 +706,7 @@ all elements that match the specified CSS selector.</p>
706706
</p>
707707
<!-- image009.png -->
708708
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
709-
<h2>How to get all ID of the DOM elements with JavaScript?</h2>
709+
<h2 id="#D-04">04. How to get all ID of the DOM elements with JavaScript?</h2>
710710
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
711711
Given a HTML document and the task is to get the all ID of the DOM elements in an array. There are
712712
two methods to solve this problem which are discusses below:
@@ -850,7 +850,7 @@ has an ID. If it has an ID then push it into the array.
850850
</p>
851851
<!-- image011.gif -->
852852
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
853-
<h2>JavaScript – How to Get the Data Attributes of an Element?</h2>
853+
<h2 id="#D-05">05. JavaScript – How to Get the Data Attributes of an Element?</h2>
854854
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
855855
Here are the various methods to get the data attributes of an element using JavaScript
856856
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
@@ -983,7 +983,7 @@ The getAttribute() method in JavaScript retrieves the value of a specified attri
983983
</p>
984984
<!-- image013.gif -->
985985
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
986-
<h2>How To Get Element By Class Name In JavaScript?</h2>
986+
<h2 id="#D-06">06. How To Get Element By Class Name In JavaScript?</h2>
987987
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
988988
When working with the DOM in JavaScript, selecting elements by their class names is a common task. JavaScript provides several methods to achieve this, whether we need to select one or multiple elements. In this article, we will cover different approaches to get elements by class name in JavaScript.
989989

@@ -1207,7 +1207,7 @@ var elements = document.querySelectorAll(".className");
12071207
</p>
12081208
<!-- image016.png -->
12091209
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
1210-
<h2>How to Get Value by Class Name using JavaScript?</h2>
1210+
<h2 id="#D-07">07. How to Get Value by Class Name using JavaScript?</h2>
12111211
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
12121212
This article will show you how to use JavaScript to get value by class name. To get the value
12131213
of an element by its class name in JavaScript, you can use the getElementsByClassName() method.
@@ -1367,7 +1367,7 @@ then access the value property of the first element in the array to get the valu
13671367
</a>
13681368
</p>
13691369
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
1370-
<h2>How to Get Domain Name From URL in JavaScript?</h2>
1370+
<h2 id="#D-08">08. How to Get Domain Name From URL in JavaScript?</h2>
13711371
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
13721372
In JavaScript, the URL object allows you to easily parse URLs and access their components. This is useful when you need to extract specific parts of a URL, such as the domain name. The hostname property of the URL object provides the domain name of the URL.
13731373

@@ -1458,7 +1458,7 @@ If you want more control or need to support environments where the URL object is
14581458
<!-- image034.png -->
14591459

14601460
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
1461-
<h2>How to get protocol, domain and port from URL using JavaScript?</h2>
1461+
<h2 id="#D-09">09. How to get protocol, domain and port from URL using JavaScript?</h2>
14621462
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
14631463
The protocol, domain, and port of the current page can be found by two methods:
14641464

@@ -1671,7 +1671,7 @@ port = url_object.port;
16711671
</p>
16721672
<!-- image038.png -->
16731673
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
1674-
<h2>How to Extract the Host Name from URL using JavaScript?</h2>
1674+
<h2 id="#D-10">10. How to Extract the Host Name from URL using JavaScript?</h2>
16751675
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
16761676
Extracting the hostname from a URL using JavaScript means retrieving the domain part from a complete web address. This can be done using JavaScript’s URL object or methods like window.location, which allow easy access to the hostname of a URL.
16771677

@@ -1798,7 +1798,7 @@ here we extracts the hostname from a user-provided URL by locating the position
17981798
</p>
17991799
<!-- image040.gif -->
18001800
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
1801-
<h2>How to Get the Current URL using JavaScript?</h2>
1801+
<h2 id="#D-11">11. How to Get the Current URL using JavaScript?</h2>
18021802
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
18031803
Here are two different methods to get the current URL in JavaScript.
18041804

@@ -1847,7 +1847,7 @@ console.log(currentUrl);
18471847
Note: Use the HTML file to copy paste and run the given code and you can see the output in the console, it will print the URL.
18481848

18491849
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
1850-
<h2>How to get URL Parameters using JavaScript?</h2>
1850+
<h2 id="#D-12">12. How to get URL Parameters using JavaScript?</h2>
18511851
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
18521852
To get URL parameters using JavaScript means extracting the query string values from a URL. URL parameters, found after the ? in a URL, pass data like search terms or user information. JavaScript can parse these parameters, allowing you to programmatically access or manipulate their values.
18531853

@@ -2011,7 +2011,7 @@ https://www.example.com/login.php?a=GeeksforGeeks&b=500&c=Hello Geeks
20112011

20122012

20132013
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
2014-
<h2>How to parse URL using JavaScript?</h2>
2014+
<h2 id="#D-13">13. How to parse URL using JavaScript?</h2>
20152015
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
20162016
Given an URL and the task is to parse that URL and retrieve all the related data using JavaScript. Example:
20172017

@@ -2095,7 +2095,7 @@ search=query
20952095
```
20962096

20972097
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
2098-
<h2>Manipulating HTML Elements with JavaScript</h2>
2098+
<h2 id="#D-14">14. Manipulating HTML Elements with JavaScript</h2>
20992099
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
21002100
JavaScript is a powerful language that can be used to manipulate the HTML elements on a web page. By using JavaScript, we can access the HTML elements and modify their attributes, styles, and content. This allows us to create dynamic and interactive web pages.
21012101

@@ -2280,7 +2280,7 @@ Explanation: In this example, we first access the button element using the getEl
22802280
Conclusion: In conclusion, manipulating HTML elements with JavaScript is a powerful technique that can be used to create dynamic and interactive web pages. By using the methods discussed above, we can identify and access the HTML elements on a web page and modify their properties to create the desired behavior.
22812281

22822282
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
2283-
<h2>How to use innerHTML in JavaScript?</h2>
2283+
<h2 id="#D-15">15. How to use innerHTML in JavaScript?</h2>
22842284
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
22852285
The innerHTML property in JavaScript allows you to get or set the HTML content of an element as a string.
22862286

@@ -2383,7 +2383,7 @@ console.log(element.innerHTML);
23832383
</p>
23842384
<!-- image046.gif -->
23852385
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
2386-
<h2>JavaScript innerHTML</h2>
2386+
<h2 id="#D-16">16. JavaScript innerHTML</h2>
23872387
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
23882388

23892389
The innerHTML property in JavScript is used to append the dynamic HTML or text content to an element using JavaScript. It is designed to add dynamic HTML, but developers also use it to add text content as well. It can be directly used with the element by selecting it using DOM manipulation.

0 commit comments

Comments
 (0)