इसके लिए, document.querySelectorAll() का उपयोग करें।
उदाहरण
निम्नलिखित कोड है -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
<p class="numberDemo">My Paragraph</p>
<p class="numberDemo">My Paragraph</p>
<p class="numberDemo">My Paragraph</p>
<button id="orderDemo">Click to Order the Paragraph</button>
</body>
<script>
document.getElementById('orderDemo')
.addEventListener('click', function (e) {
var allHTMLValues = document.querySelectorAll('.numberDemo');
var counter = 1;
for (temp of allHTMLValues) {
temp.innerText = 'The Paragraph is in order ' + (counter);
counter = counter + 1;
}
});
</script>
</html> उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल नाम "anyName.html(index.html)" को सेव करें। फ़ाइल पर राइट क्लिक करें और विजुअल स्टूडियो कोड एडिटर में "ओपन विद लाइव सर्वर" विकल्प चुनें।
आउटपुट
यह कंसोल पर निम्न आउटपुट उत्पन्न करेगा -
बटन पर क्लिक करने पर आपको एक सीक्वेंस मिलेगा -
