Contents
Introduction
हेलो दोस्तों आज हम इस post में javaScript में DOM (document object model) के साथ खास तोर पर इस्तेमाल होने वाले methods जैसे की querySelector() और querySelectorAll() के बारेमे जानेगे!. इन methods का इस्तेमाल करके HTML document के elements को access और menipulate करना easy हो जाता है!. और ये method document object model API का एक part है और इसका इस्तेमाल किसी document page से elements को select और manipulate करने के लिए किया जा सकता है चाहे वह styling के लिए हो, elements को add, remove और change करना हो!.
Javascript querySelector() method
Javascript querySelector() का इस्तेमाल document में first element को select करने के लिए किया जाता है जो specified selector के साथ match होता हो. यह first selected element को return करता है अगर ऐसा कोई element matches नहीं है तो वह null return करता है!.
Example:
<script>
let firstselect = document.querySelector('h1');
console.log(firstselect.textContent); // output: "Example firstselect"
</script>
इस example में querySelector() method का इस्तेमाल document में first “h1” element का select करने के लिए किया जाता है!. उसके बाद textContent property का इस्तेमाल header text को retrieve करने और console में log करने के लिए किया जाता है!.
Javascript querySelectorAll() method
Javascript querySelectorAll() का इस्तेमाल document में सभी elements को select करने के लिए किया जाता है जो specified selector से match होते है!. यह method specified elements से match होने वाले सभी elements का एक NodeList return करता है!. जिसे array की तरह manipulated किया जा सकता है!.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The ul element</h1>
<ul>
<li>PHP</li>
<li>CSS</li>
<li>JS</li>
</ul>
<script>
let listItems = document.querySelectorAll('li');
for (let i = 0; i < listItems.length; i++) {
console.log(listItems[i].textContent);
}
</script>
</body>
</html>
इस example में querySelectorAll() का इस्तेमाल document में सभी “li” elements का select करने के लिए किया जाता है!.
for loop का इस्तेमाल सभी selected element item को पुनरावृति करने के लिए किया जाता है!. और हरेक element item की text को control किया जाता है!.
querySelector() और querySelectorAll() दोनों बहुत fast और efficient है जो बड़े level के project में complex document के साथ काम करते time उपयोग करने के लिए किया जाता है!. ये method बहुत ही flexible है जिससे आप CSS selects element को एक array के आधार पर elements को select कर सकते है!.
Elements को selecting के अलावा querySelector() और querySelectoAll() का estemal element की style, content और behavior को change करने के लिए भी किया जा सकता है!.
For example selected elements के style को change करने के लिए style property का इस्तेमाल कर सकते है!. या किसी elements की content को chanage करने के लिए content property का इस्तेमाल कर सकते है!.
<script>
let firstHeader = document.querySelector('h1');
firstHeader.style.color = 'red';
firstHeader.textContent = 'New Header Text';
</script>
इस example में querySelector() का इस्तेमाल document में first “h1” element का select करने के लिए किया जाता है!.
इसके bad में style property का इस्तेमाल header को red color में change करने के लिए किया जाता है!. और textContent property का इस्तेमाल header text content को “New Header Text” में change करने के लिए किया जाता है!.
Last में querySelector() और querySelectorAll() javascript में elements को manipulating और retrive करने के लिए है!. ये CSS selectors के आधार पर elements को select करने के लिए एक fast और efficient तरीका है और ये आपको element में textContent change करने की अनुमति देते है!. जैसे की style या text content chanage करना, चाहे आप छोटे project पर काम कर रहे हो या किसी बड़े project ये तरीके javascript में Document object model(DOM) के साथ काम करने की लिए आवश्यक है!.
