Skip to content

Commit 5ff6a50

Browse files
bbauskabbauska
authored
Update README.md
1 parent c022ae0 commit 5ff6a50

1 file changed

Lines changed: 297 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1529,5 +1529,302 @@ In this approach we are using the document.querySelectorAll() method. This metho
15291529

15301530

15311531

1532+
<h2>How to Get Value by Class Name using JavaScript?</h2>
1533+
1534+
This article will show you how to use JavaScript to get value by class name. To get the value of an element by its class name in JavaScript, you can use the getElementsByClassName() method. This method returns an array-like object of all elements with the specified class name. You can then access the value property of the first element in the array to get the value.
1535+
1536+
<h4>Example: In this example, we will get the classname of an element.</h4>
1537+
1538+
```
1539+
<!DOCTYPE html>
1540+
<html lang="en">
1541+
1542+
<head>
1543+
<meta charset="UTF-8">
1544+
<meta name="viewport" content=
1545+
"width=device-width, initial-scale=1.0">
1546+
1547+
<title>Get Value by Class Name</title>
1548+
</head>
1549+
1550+
<body style="text-align: center;">
1551+
<h1 class="heading">
1552+
GeeksforGeeks
1553+
</h1>
1554+
1555+
<p class="para">
1556+
A computer science portal for geeks
1557+
</p>
1558+
1559+
<button onclick="myGeeks()">
1560+
Get Value
1561+
</button>
1562+
1563+
<p id="result"></p>
1564+
1565+
<script>
1566+
function myGeeks() {
1567+
1568+
// Get elements with the class name 'heading'
1569+
let headingElements =
1570+
document.getElementsByClassName('heading');
1571+
1572+
// Check if any elements with the
1573+
// specified class name exist
1574+
if (headingElements.length > 0) {
1575+
1576+
// Access the value of the first
1577+
// element in the collection
1578+
let headingVal = headingElements[0].innerHTML;
1579+
1580+
// Update the content of the 'result' element
1581+
document.getElementById('result')
1582+
.innerHTML = headingVal;
1583+
} else {
1584+
console.log(
1585+
'Element with class name "heading" not found.');
1586+
}
1587+
}
1588+
</script>
1589+
</body>
1590+
1591+
</html>
1592+
```
1593+
1594+
<h4>Output:</h4>
1595+
<!-- image023.gif -->
1596+
1597+
<h4>Example 2: In this example, we will get the second element by class name.</h4>
1598+
1599+
```
1600+
<!DOCTYPE html>
1601+
<html lang="en">
1602+
1603+
<head>
1604+
<meta charset="UTF-8">
1605+
<meta name="viewport" content=
1606+
"width=device-width, initial-scale=1.0">
1607+
1608+
<title>Get Value by Class Name</title>
1609+
</head>
1610+
1611+
<body style="text-align: center;">
1612+
<h1 class="heading text">
1613+
GeeksforGeeks
1614+
</h1>
1615+
1616+
<p class="para text">
1617+
A computer science portal for geeks
1618+
</p>
1619+
1620+
<button onclick="myGeeks()">
1621+
Get Value
1622+
</button>
1623+
1624+
<p id="result"></p>
1625+
1626+
<script>
1627+
function myGeeks() {
1628+
1629+
// Get elements with the class name 'heading'
1630+
let headingElements =
1631+
document.getElementsByClassName('text');
1632+
1633+
// Check if any elements with the
1634+
// specified class name exist
1635+
if (headingElements.length > 0) {
1636+
1637+
// Access the value of the first
1638+
// element in the collection
1639+
let headingVal = headingElements[1].innerHTML;
1640+
1641+
// Update the content of the 'result' element
1642+
document.getElementById('result')
1643+
.innerHTML = headingVal;
1644+
} else {
1645+
console.log(
1646+
'Element with class name "text" not found.');
1647+
}
1648+
}
1649+
</script>
1650+
</body>
1651+
1652+
</html>
1653+
```
1654+
1655+
<h4>Output:</h4>
1656+
1657+
1658+
<!-- image024.gif -->
1659+
1660+
<h2>How To Get Element By Class Name In JavaScript?</h2>
1661+
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.
1662+
1663+
<h4>Prerequisites</h4>
1664+
- HTML
1665+
- CSS
1666+
- JavaScript
1667+
1668+
Below are the following approaches to get elements by class name in Javascript:
1669+
1670+
<h4>Table of Content</h4>
1671+
1672+
- Using document.getElementsByClassName()
1673+
- Using document.querySelector()
1674+
- Using document.querySelectorAll()
1675+
1676+
1. Using document.getElementsByClassName()
1677+
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.
1678+
1679+
<h4>Syntax:</h4>
1680+
1681+
<pre>var elements = document.getElementsByClassName("className");</pre>
1682+
1683+
<h4>Example: In this example we are using the getElementsByClassName() method to get element by class name in javascript.</h4>
1684+
1685+
```
1686+
<!DOCTYPE html>
1687+
<html lang="en">
1688+
1689+
<head>
1690+
<meta charset="UTF-8">
1691+
<meta name="viewport"
1692+
content="width=device-width,
1693+
initial-scale=1.0">
1694+
<title>Get Elements by Class Name</title>
1695+
<style>
1696+
.output {
1697+
margin-top: 20px;
1698+
padding: 10px;
1699+
border: 1px solid #ccc;
1700+
background-color: #f9f9f9;
1701+
}
1702+
</style>
1703+
</head>
1704+
1705+
<body>
1706+
<div class="box">Box 1</div>
1707+
<div class="box">Box 2</div>
1708+
<div class="box">Box 3</div>
1709+
1710+
<div class="output" id="output1"></div>
1711+
1712+
<script>
1713+
var boxes =
1714+
document.getElementsByClassName("box");
1715+
var output =
1716+
document.getElementById("output1");
1717+
output.innerHTML =
1718+
"Number of boxes: " + boxes.length;
1719+
</script>
1720+
</body>
1721+
1722+
</html>
1723+
```
1724+
1725+
<h4>Output:</h4>
1726+
<!-- image025 -->
1727+
1728+
2. Using document.querySelector()
1729+
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.
1730+
1731+
<h4>Syntax:</h4>
1732+
1733+
<pre>var element = document.querySelector(".className");</pre>
1734+
<h4>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.</h4>
1735+
1736+
```
1737+
<!DOCTYPE html>
1738+
<html lang="en">
1739+
1740+
<head>
1741+
<meta charset="UTF-8">
1742+
<meta name="viewport"
1743+
content="width=device-width,'' initial-scale=1.0">
1744+
<title>Query Selector Example</title>
1745+
<style>
1746+
.box {
1747+
padding: 10px;
1748+
margin: 5px;
1749+
border: 1px solid #ccc;
1750+
}
1751+
</style>
1752+
</head>
1753+
1754+
<body>
1755+
<div class="box">Box 1</div>
1756+
<div class="box">Box 2</div>
1757+
<div class="box">Box 3</div>
1758+
1759+
<script>
1760+
var firstBox =
1761+
document.querySelector(".box");
1762+
firstBox.style.backgroundColor =
1763+
"lightblue"; // Change the background color to light blue
1764+
firstBox.style.color = "white"; // Change the text color to white
1765+
</script>
1766+
</body>
1767+
1768+
</html>
1769+
```
1770+
1771+
<h4>Output:</h4>
1772+
<!-- image026.png -->
1773+
1774+
<h3>3. Using document.querySelectorAll()</h3>
1775+
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.
1776+
1777+
<h4>Syntax:</h4>
1778+
<pre>var elements = document.querySelectorAll(".className");</pre>
1779+
1780+
<h4>Example: In below example we are using the querySelectorAll and we will print all the content which have that class name.</h4>
1781+
1782+
```
1783+
<!DOCTYPE html>
1784+
<html lang="en">
1785+
1786+
<head>
1787+
<meta charset="UTF-8">
1788+
<meta name="viewport"
1789+
content="width=device-width,
1790+
initial-scale=1.0">
1791+
<title>Query Selector All Example</title>
1792+
<style>
1793+
.output {
1794+
margin-top: 20px;
1795+
padding: 10px;
1796+
border: 1px solid #ccc;
1797+
background-color: #f9f9f9;
1798+
}
1799+
</style>
1800+
</head>
1801+
1802+
<body>
1803+
<div class="box">Box 1</div>
1804+
<div class="box">Box 2</div>
1805+
<div class="box">Box 3</div>
1806+
1807+
<div class="output" id="output3"></div>
1808+
1809+
<script>
1810+
var allBoxes =
1811+
document.querySelectorAll(".box");
1812+
var output =
1813+
document.getElementById("output3");
1814+
var content = "Contents of all boxes: <br>";
1815+
allBoxes.forEach(function (box) {
1816+
content += box.innerText + "<br>";
1817+
});
1818+
output.innerHTML = content;
1819+
</script>
1820+
</body>
1821+
1822+
</html>
1823+
```
1824+
1825+
<h4>Output:</h4>
1826+
<!-- image027.png -->
1827+
1828+
15321829

15331830

0 commit comments

Comments
 (0)