Table of Contents
Introduction
Javascript में आप DOM (document object model) के द्वारा provide किये गए methods का इस्तेमाल करके HTML elements को access कर सकते है!. DOM एक web documents structure और HTML के element को एक object के रूप में represents करने वाला एक programming interface है जो आपको उन्हें dynamically रूप से element को manipulate करने की अनुमति देता है!.
How to access child elements from the parent element
querySelector() : यह method parent elements के अंदर दिए गई css selector के साथ match होने वाले first child element को return करता है!.
Syntax:
var parentElement = document.querySelector('#parentElementId');
var childElement = parentElement.querySelector('childSelector');
Example:
<div id="parentElementId">
<p>Parent Element</p>
<div class="childElement">
<p>Child Element 1</p>
</div>
<div class="childElement">
<p>Child Element 2</p>
</div>
</div>
<script>
var parentElement = document.querySelector('#parentElementId');
var childElement = parentElement.querySelector('.childElement');
console.log(childElement.textContent); // Output: "Child Element 1"
</script>
childNodes: ये property एक live NodeList लोटती है जिसमे parent element के सभी clild node सामील होते है!.
syntax:
var parentElement = document.getElementById('parentElementId');
var childNodes = parentElement.childNodes;
Example:
<div id="parentElementId">
<p>Parent Element</p>
<div class="childElement">
<p>Child Element 1</p>
</div>
<div class="childElement">
<p>Child Element 2</p>
</div>
</div>
<script>
var parentElement = document.getElementById('parentElementId');
var childNodes = parentElement.childNodes;
console.log(childNodes[1].textContent); // Output: "Child Element 1"
</script>
children: यह property parent elements के सभी child elements का एक live HTMLCollection returns करता है!.
Syntax:
var parentElement = document.getElementById('parentElementId');
var childElements = parentElement.children;
Example:
<div id="parentElementId">
<p>Parent Element</p>
<div class="childElement">
<p>Child Element 1</p>
</div>
<div class="childElement">
<p>Child Element 2</p>
</div>
</div>
<script>
var parentElement = document.getElementById('parentElementId');
var childElements = parentElement.children;
console.log(childElements[0].textContent); // Output: "Child Element 1"
</script>
Javascript में elements को access करने लिए methods जैसे की
getElementById()
इस method का इस्तेमाल HTML element में unique ID attribute है इस elements को access और manipulate करने के लिए कर सकते है!. यह method documen से single element को return करता है जो specified elements के ID attribute से मेल खता है!.
Example:
<!DOCTYPE html>
<html>
<body>
<h1 id="myHeading">Hello World!</h1>
<script>
var heading = document.getElementById("myHeading"); // Accessing element with ID "myHeading"
console.log(heading); // Outputs the element object to the console
</script>
</body>
</html>
getElementsByClassName()
इस method के इस्तेमाल से elements को उसके class name के आधार पर access किया जा सकता है!.
और वह elements का एक collection लोटता है जिस element में specified class name होता है!.
Example
<!DOCTYPE html>
<html>
<body>
<p class="myParagraph">This is a paragraph.</p>
<p class="myParagraph">This is another paragraph.</p>
<script>
var paragraphs = document.getElementsByClassName("myParagraph"); // Accessing elements with class name "myParagraph"
console.log(paragraphs); // Outputs the collection of elements to the console
</script>
</body>
</html>
getElementsByTagName()
इस method के इस्तेमाल से elements को उसके tags name के आधार पर access किया जाता सकता है!. और वह elemets का एक collection लोटता है जिस element में specified tag name होता है!.
Example
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
var paragraphs = document.getElementsByTagName("p"); // Accessing all <p> elements
console.log(paragraphs); // Outputs the collection of elements to the console
</script>
</body>
</html>
querySelector()
इस method का इस्तेमाल element को access css selector के आधार पर कर सकते है!.
यह method document से first element को return करता है जो specified selector से matches होता है!.
Example
<!DOCTYPE html>
<html>
<body>
<p id="myParagraph">This is a paragraph.</p>
<script>
var paragraph = document.querySelector("#myParagraph"); // Accessing element with ID "myParagraph"
console.log(paragraph); // Outputs the element object to the console
</script>
</body>
</html>
querySelectorAll()
Javascript की querySelectorAll() method DOM (document object model) का एक method है जो एक या एक से
अधिक HTML elements को access करने के लिए इस्तेमाल की जाती है!. यह specified selector से सभी elements का एक NodeList object return करती है!.
Example
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Item 1</li>
<li class="selected">Item 2</li>
<li>Item 3</li>
<li class="selected">Item 4</li>
<li>Item 5</li>
</ul>
<script>
// Access all li elements with class 'selected'
var selectedItems = document.querySelectorAll('li.selected');
// Loop through the NodeList and perform some action on each element
for (var i = 0; i < selectedItems.length; i++) {
var item = selectedItems[i];
// Manipulate the element as needed
item.textContent = 'Selected: ' + item.textContent;
item.style.fontWeight = 'bold';
}
</script>
</body>
</html>
ऊपर के method एक live HTML collection या NodeList लोटती है. जिसका मतलब है की DOM में किये गये किसी bhi प्रकार के changes को return की गये collection में reflected किया जायेगा!. यदि आप DOM के elements के static copy को access करना चाहते है तो आप HTMLCollection और NodeList को एक array में convert कर सकते है या तो spread operator का इस्तेमाल कर सकते है!.
ये कुछ methods है जिनका इस्तेमाल javascript में elements को access करने के लिए किया जाता है आप specified जिस elements को access और manipulate करना चाहते है उसके आधार पर उस method का इस्तेमाल कर सकते है जो आपकी requirements को सबसे अच्छी तरह से पूरा कर सकती है!.
