Q. What is the DOM querySelector() Method ?

DOM querySelector() Method के द्वारा getElementById(), getElementsByClassName() और getElementsByTagName () की तरह किसी html document के element को find किया जाता ।

Note :- किसी भी DOM querySelector() Method को ID , Class, और Tag के साथ use किया जाता है ।

Remember this point (css Selector)

• id का use # (hash) के साथ
• class का use . (dot) के साथ
• tag के साथ किसी symbol की जरुरत नहीं होती है

How Many type of DOM querySelector() Method ?

DOM querySelector() Method दो प्रकार के होते हैं

1. querySelector()
2. querySelectorAll()

Q. What is querySelector() ?

querySelector() method में जब किसी element को search करते हैं तो उसके first element के data को return करता है ।

जैसे की मान लीजिये की किसी html document के अंदर 5

tag का use किया गया है। तो first

tag के data को return करेगा .

<article id="idcontainer" class="class_container" style="margin-top: 35px;">

<div class="content_class">

<h1>Set Dom Value</h1>

<div class="teach coders tutorial">

<h2>First heading</h2>

<p>First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. <a class="my-btn">More First</a></p>

</div>

<div class="teach coders tutorial">

<h2>Second heading</h2>

<p>Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. <a class="my-btn" href="readsecond.html">More Seond</a></p>

</div>

<div class="teach coders tutorial">

<h2>Third heading</h2>

<p>Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. <a class="my-btn" href="readthird.html">More Third</a></p>

</div>

<div class="teach coders tutorial">

<h2>Forth heading</h2>

<p>Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. <a class="my-btn" href="readforth.html">More Forth</a></p>

</div>

<div class="teach coders tutorial">

<h2>Fifth heading</h2>

<p>Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. <a class="my-btn" href="readfifth.html">More Fifth</a></p>

</div>

</div>

</article>

<script>
   /*use with id*/
   var a  = document.querySelector("#idcontainer");
   console.log(a)

   /*use with class*/
   var b  = document.querySelector(".teach");
   console.log(b)

    /*use with tag*/
   var b  = document.querySelector("p");
   console.log(b)
</script>

                          

2. What is querySelectorAll () ?

querySelectorAll() method के द्वारा जब किसी element को search करते हैं तो वह array के रूप में data को return करता है। इसलिए उन element में किसी particular element के data को find करने के लिए उसके indexing (like [0] ) का use करके उसे return करते हैं।

<article id="idcontainer" class="class_container" style="margin-top: 35px;">

<div class="content_class">

<h1>Set Dom Value</h1>

<div class="teach coders tutorial">

<h2>First heading</h2>

<p>First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. First Paragraph Text. <a class="my-btn">More First</a></p>

</div>

<div class="teach coders tutorial">

<h2>Second heading</h2>

<p>Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. Second Paragraph Text. <a class="my-btn" href="readsecond.html">More Seond</a></p>

</div>

<div class="teach coders tutorial">

<h2>Third heading</h2>

<p>Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. Third Paragrap Text. <a class="my-btn" href="readthird.html">More Third</a></p>

</div>

<div class="teach coders tutorial">

<h2>Forth heading</h2>

<p>Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. Forth Paragrap Text. <a class="my-btn" href="readforth.html">More Forth</a></p>

</div>

<div class="teach coders tutorial">

<h2>Fifth heading</h2>

<p>Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. Fifth Paragrap Text. <a class="my-btn" href="readfifth.html">More Fifth</a></p>

</div>

</div>

</article>

<script>
   /*use with id*/
   var a  = document.querySelectorAll("#idcontainer")[0];
   console.log(a)

   /*use with class*/
   var b  = document.querySelectorAll(".teach")[0];
   console.log(b)

    /*use with tag*/
   var b  = document.querySelector("p")[0];
   console.log(b)
</script>