Skip to content

Commit 1d2eaec

Browse files
bbauskabbauska
authored
Update README.md
1 parent 3988463 commit 1d2eaec

1 file changed

Lines changed: 338 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 338 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -822,8 +822,346 @@ has an ID. If it has an ID then push it into the array.
822822
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
823823
<h2>JavaScript – How to Get the Data Attributes of an Element?</h2>
824824
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
825+
Here are the various methods to get the data attributes of an element using JavaScript
826+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
827+
<h3>1. Using dataset Property</h3>
828+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
829+
The dataset property in JavaScript allows you to access all data attributes of an HTML element as a DOMStringMap object. It simplifies retrieving, modifying, or interacting with custom data stored in attributes like data-id or data-name.
830+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
831+
<h4>Syntax</h4>
832+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
833+
<pre><code>
834+
const e = document.getElementByID('demo') // Accessing the element
835+
const dataId = e.dataset.dataID //Access the data-id attribute
836+
</code></pre>
837+
838+
```
839+
<!DOCTYPE html>
840+
<html>
841+
842+
<body>
843+
<div
844+
id="element"
845+
data-typeId="123"
846+
data-name="name"
847+
data-points="10"
848+
data-important="true">
849+
This is the Target Element.
850+
</div>
851+
852+
<br />
853+
<button onclick="myFunction()">
854+
Get Attributes
855+
</button>
856+
857+
<p id="result"></p>
858+
859+
<script>
860+
let result = document.getElementById("result");
861+
let e = document.getElementById("element");
862+
863+
function myFunction() {
864+
let jsonData = JSON.stringify({
865+
id: parseInt(e.dataset.typeid),
866+
points: parseInt(e.dataset.points),
867+
important: e.dataset.important,
868+
dataName: e.dataset.name
869+
});
870+
result.innerHTML = jsonData;
871+
}
872+
</script>
873+
</body>
874+
875+
</html>
876+
```
877+
878+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
879+
<h4>Output:</h4>
880+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
881+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 12. ~~~~~~~~~~~~~~~~-->
882+
<p align="center" >
883+
<a href=""
884+
target="_blank" rel="noopener noreferrer">
885+
<img class="displayed"
886+
src="./images/image012.gif?raw=true"
887+
loading="lazy"
888+
style="width:40%;"
889+
title=""
890+
alt="." />
891+
</a>
892+
</p>
893+
894+
<!-- image012.gif -->
895+
896+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
897+
<h3>2. Using getAttribute() Method</h3>
898+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
899+
The getAttribute() method in JavaScript retrieves the value of a specified attribute from an HTML element. To get data attributes, use element.getAttribute(‘data-attribute’). This method allows precise selection and manipulation of individual data attributes without accessing all at once.
900+
901+
```
902+
<!DOCTYPE html>
903+
<html>
904+
905+
<body>
906+
<div
907+
id="target"
908+
data-typeId="123"
909+
data-name="name"
910+
data-points="10"
911+
data-important="true"
912+
>
913+
This is the Target Element.
914+
</div>
915+
916+
<br />
917+
<button onclick="myFunction()">Get Attributes</button>
918+
<p id="result"></p>
919+
920+
<script>
921+
let result = document.getElementById("result");
922+
let e = document.getElementById("target");
923+
924+
function myFunction() {
925+
let jsonData = JSON.stringify({
926+
id: parseInt(e.getAttribute('data-typeId')),
927+
points: parseInt(e.getAttribute('data-points')),
928+
important: e.getAttribute('data-important'),
929+
dataName: e.getAttribute('data-name')
930+
});
931+
result.innerHTML = jsonData;
932+
}
933+
</script>
934+
</body>
935+
936+
</html>
937+
```
938+
939+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
940+
<h4>Output:</h4>
941+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
942+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
943+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 13. ~~~~~~~~~~~~~~~~-->
944+
<p align="center" >
945+
<a href=""
946+
target="_blank" rel="noopener noreferrer">
947+
<img class="displayed"
948+
src="./images/image013.gif?raw=true"
949+
loading="lazy"
950+
style="width:40%;"
951+
title=""
952+
alt="." />
953+
</a>
954+
</p>
955+
<!-- image013.gif -->
956+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
957+
<h2>How To Get Element By Class Name In JavaScript ?</h2>
958+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
959+
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.
960+
961+
<h4>Prerequisites</h4>
962+
- HTML
963+
- CSS
964+
- JavaScript
965+
966+
Below are the following approaches to get elements by class name in Javascript:
967+
968+
<h4>Table of Content</h4>
969+
970+
- Using document.getElementsByClassName()
971+
- Using document.querySelector()
972+
- Using document.querySelectorAll()
973+
974+
<h3>1. Using document.getElementsByClassName()</h3>
975+
In this approach we are using the document.getElementsByClassName() method. This method selects all elements with a specific class name and returns a live HTMLCollection. Think of it as a way to collect all elements with same label. In this, list gets updated automatically if elements are added or removed.
976+
977+
<h4>Syntax:</h4>
978+
<pre><code>var elements = document.getElementsByClassName("className");</code></pre>
979+
980+
Example: In this example we are using the getElementsByClassName() method to get element by class name in javascript.
981+
982+
```
983+
<!DOCTYPE html>
984+
<html lang="en">
985+
986+
<head>
987+
<meta charset="UTF-8">
988+
<meta name="viewport"
989+
content="width=device-width,
990+
initial-scale=1.0">
991+
<title>Get Elements by Class Name</title>
992+
<style>
993+
.output {
994+
margin-top: 20px;
995+
padding: 10px;
996+
border: 1px solid #ccc;
997+
background-color: #f9f9f9;
998+
}
999+
</style>
1000+
</head>
8251001
1002+
<body>
1003+
<div class="box">Box 1</div>
1004+
<div class="box">Box 2</div>
1005+
<div class="box">Box 3</div>
1006+
1007+
<div class="output" id="output1"></div>
1008+
1009+
<script>
1010+
var boxes =
1011+
document.getElementsByClassName("box");
1012+
var output =
1013+
document.getElementById("output1");
1014+
output.innerHTML =
1015+
"Number of boxes: " + boxes.length;
1016+
</script>
1017+
</body>
1018+
1019+
</html>
1020+
```
1021+
1022+
<h4>Output:</h4>
1023+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
1024+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 14. ~~~~~~~~~~~~~~~~-->
1025+
<p align="center" >
1026+
<a href=""
1027+
target="_blank" rel="noopener noreferrer">
1028+
<img class="displayed"
1029+
src="./images/image014.png?raw=true"
1030+
loading="lazy"
1031+
style="width:40%;"
1032+
title=""
1033+
alt="." />
1034+
</a>
1035+
</p>
1036+
<!-- image014.png -->
1037+
1038+
<h3>2. Using document.querySelector()</h3>
1039+
In this approach we are using the document.querySelector() method. This method returns the first element that matches the specified selector (class name). It is useful when you only need to select a single element by class name.
1040+
1041+
Syntax:
1042+
1043+
<pre>var element = document.querySelector(".className");</pre>
1044+
1045+
Example: In this example we are using the querySelector() method to get element by class name and we will change the background color of selected class in javascript.
1046+
1047+
```
1048+
<!DOCTYPE html>
1049+
<html lang="en">
1050+
1051+
<head>
1052+
<meta charset="UTF-8">
1053+
<meta name="viewport"
1054+
content="width=device-width,'' initial-scale=1.0">
1055+
<title>Query Selector Example</title>
1056+
<style>
1057+
.box {
1058+
padding: 10px;
1059+
margin: 5px;
1060+
border: 1px solid #ccc;
1061+
}
1062+
</style>
1063+
</head>
1064+
1065+
<body>
1066+
<div class="box">Box 1</div>
1067+
<div class="box">Box 2</div>
1068+
<div class="box">Box 3</div>
1069+
1070+
<script>
1071+
var firstBox =
1072+
document.querySelector(".box");
1073+
firstBox.style.backgroundColor =
1074+
"lightblue"; // Change the background color to light blue
1075+
firstBox.style.color = "white"; // Change the text color to white
1076+
</script>
1077+
</body>
1078+
1079+
</html>
1080+
```
1081+
1082+
<h4>Output</h4>
1083+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
1084+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 15. ~~~~~~~~~~~~~~~~-->
1085+
<p align="center" >
1086+
<a href=""
1087+
target="_blank" rel="noopener noreferrer">
1088+
<img class="displayed"
1089+
src="./images/image015.png?raw=true"
1090+
loading="lazy"
1091+
style="width:40%;"
1092+
title=""
1093+
alt="." />
1094+
</a>
1095+
</p>
1096+
<!-- image015.png -->
8261097

1098+
<h3>3. Using document.querySelectorAll()</h3>
1099+
In this approach we are using the document.querySelectorAll() method. This method finds all elements that match a specific CSS selector, like class name. It gives you a static list, which means it wont automatically update if page changes.
8271100

1101+
Syntax:
1102+
1103+
```
1104+
var elements = document.querySelectorAll(".className");
1105+
```
1106+
1107+
Example: In below example we are using the querySelectorAll and we will print all the content which have that class name.
1108+
1109+
```
1110+
<!DOCTYPE html>
1111+
<html lang="en">
1112+
1113+
<head>
1114+
<meta charset="UTF-8">
1115+
<meta name="viewport"
1116+
content="width=device-width,
1117+
initial-scale=1.0">
1118+
<title>Query Selector All Example</title>
1119+
<style>
1120+
.output {
1121+
margin-top: 20px;
1122+
padding: 10px;
1123+
border: 1px solid #ccc;
1124+
background-color: #f9f9f9;
1125+
}
1126+
</style>
1127+
</head>
8281128
1129+
<body>
1130+
<div class="box">Box 1</div>
1131+
<div class="box">Box 2</div>
1132+
<div class="box">Box 3</div>
1133+
1134+
<div class="output" id="output3"></div>
1135+
1136+
<script>
1137+
var allBoxes =
1138+
document.querySelectorAll(".box");
1139+
var output =
1140+
document.getElementById("output3");
1141+
var content = "Contents of all boxes: <br>";
1142+
allBoxes.forEach(function (box) {
1143+
content += box.innerText + "<br>";
1144+
});
1145+
output.innerHTML = content;
1146+
</script>
1147+
</body>
1148+
1149+
</html>
1150+
```
1151+
1152+
<h4>Output:</h4>
1153+
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
1154+
<!--~~~~~~~~~~~~~~~~~~~~~~~ 16. ~~~~~~~~~~~~~~~~-->
1155+
<p align="center" >
1156+
<a href=""
1157+
target="_blank" rel="noopener noreferrer">
1158+
<img class="displayed"
1159+
src="./images/image016.png?raw=true"
1160+
loading="lazy"
1161+
style="width:40%;"
1162+
title=""
1163+
alt="." />
1164+
</a>
1165+
</p>
1166+
<!-- image016.png -->
8291167

0 commit comments

Comments
 (0)