querySelector() si querySelectorAll() sunt doua functii JavaScript foarte utile cand se lucreaza cu elemente HTML in JavaScript.
Cu aceste functii se pot prelua in JavaScript elemente HTML selectate dupa selectori CSS ("id", "class").
Sunt suportate de principalele navigatoare web: Mozilla Firefox 3.5+, Google Chrome, Internet Explorer 8+, Opera 10+, Safari 3.2+.
<div id="someid">Sa ai viata buna.</div> <ul> <li class="aclass">discant.ro</li> <li>discant.ro</li> <li class="aclass">php.net</li> </ul> <script type="text/javascript"> var someid_cnt = document.querySelector('#someid').innerHTML; var aclass1_cnt = document.querySelector('li.aclass').innerHTML; alert(someid_cnt +'\n'+ aclass1_cnt); </script>
<ul> <li class="sites">discant.ro</li> <li class="sites">discant.ro</li> <li>php.net</li> </ul> <div id="idata"> <span class="note">Cursuri Web Development</span> <span class="note">querySelector si querySelectorAll</span> </div> <script type="text/javascript"> // preia toate tag-urile LI cu class="sites", si tag-urile cu class="note" din elementul cu id="idata" var elm_list = document.querySelectorAll('li.sites, #idata .note'); var nr_elm = elm_list.length; // numarul de elemente din elm_list var arr_cnt = []; // array pt. continutul din elm_list // parcurge obiectul elm_list, si adauga in arr_cnt continutul fiecarui element for(var i=0; i<nr_elm; i++) { arr_cnt.push(elm_list[i].innerHTML); } // test, arata datele din arr_cnt alert(arr_cnt); </script>- Clic pe butonul "Test" ca sa vedeti rezultatul.
Diferenta dintre querySelector() si querySelectorAll() este aceea ca querySelector() returneaza un singur obiect cu primul element HTML care se potriveste cu "selectori", dar querySelectorAll() returneaza o lista de obiecte cu toate elementele HTML care se potrivesc cu "selectori".
<div id="seeurl">Arata adresa URL.</div> <ul id="sites"> <li><a href=javascript/" title="Curs JavaScript">Curs JavaScript</a></li> <li><a href="http://www.discant.ro/" title="Cursuri Jocuri Anime">Cursuri Jocuri Anime</a></li> </ul> <script type="text/javascript"> // preia tag-urile A din LI adaugate in elementul cu id="idata" var elm_list = document.getElementById('sites').querySelectorAll('li a'); var nr_elm = elm_list.length; // numar de elemente in elm_list // parcurge obiectul elm_list for(var i=0; i<nr_elm; i++) { // inregistreaza eveniment onmouseover sa adauge in #seeurl adresa din "href" a fiecarui <a> selectat elm_list[i].onmouseover = function() { document.getElementById('seeurl').innerHTML = this.href; } // inregistreaza eveniment onmouseover sa adauge in #seeurl un anumit text elm_list[i].onmouseout = function() { document.getElementById('seeurl').innerHTML = 'Arata adresa URL.'; } } </script>- Demo. Puneti cursorul de la mouse pe fiecare link.