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+.

querySelector()

querySelector() returneaza primul element din document care se potriveste cu grupul de selectori specificati, sau null daca nu e gasit.
Sintaxa:
var elm = document.querySelector('selectori');
- "selectori" e un sir cu unul sau mai multi selectori CSS, separati prin virgula.
- elm e variabila ce va contine obiectul cu elementul HTML.

Exemplu, codul de mai jos afiseaza o fereastra Alert cu continutul din tag-ul HTML cu id="someid", si cel din primul LI cu class="aclass".
<div id="someid">Sa ai viata buna.</div>
<ul>
 <li class="aclass">MarPlo.net</li>
 <li>MarPlo.net</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>

querySelectorAll()

querySelectorAll() returneaza o lista de elemente din document care se potrivesc cu grupul de selectori specificati.
Daca sirul "selectori" contine pseudo-elemente CSS, returneaza o lista goala (navigatoarele WebKit au un "bug": daca sirul "selectori" contine pseudo-elemente CSS, returneaza obiectul <html>).
Sintaxa:
var elementList = document.querySelectorAll('selectori');
- "selectori" e un sir cu unul sau mai multi selectori CSS, separati prin virgula.
- elementList e variabila ce va contine lista cu obiectele HTML selectate.

Exemplu, creaza un Array cu continutul din tag-urile LI cu class="sites", si din tag-urile cu class="note" aflate in elementul cu id="idata":
<ul>
 <li class="sites">CoursesWeb.net</li>
 <li class="sites">MarPlo.net</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".


• Pentru a limita cautarea obiectelor HTML la un singur element (nu in tot documentul), se pot aplica aceste functii la un obiect cu elementul de interes.
obiectElement.querySelector('selectori')

obiectElement.querySelectorAll('selectori')

- Iata un alt exemplu cu querySelectorAll(), selectarea se face pe un anumit element, nu pe "document". Cand cursorul de la mouse e pe tag-ul <a> selectat, adresa URL e adaugata intr-un anumit DIV.
<div id="seeurl">Arata adresa URL.</div>
<ul id="sites">
 <li><a href="http://coursesweb.net/javascript/" title="Curs JavaScript">Curs JavaScript</a></li>
 <li><a href="http://marplo.net/" 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.
Arata adresa URL.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
querySelector si querySelectorAll

Last accessed pages

  1. Coduri pt culori (1681)
  2. Zoo Amigos (943)
  3. Butterfly Kyodai (5680)
  4. Bubbles3 (8791)
  5. The Rise Of Atlantis (1521)

Popular pages this month

  1. Bubbles3 (3366)
  2. Gramatica limbii engleze - Prezentare Generala (3170)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2266)
  4. Butterfly Kyodai (2168)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1918)