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 cu selectori CSS ("id", "class").


querySelector()

querySelector() returneaza primul element din documentul HTML 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 returnat.

Exemplu, codul de mai jos afiseaza continutul din primul LI cu class='aclass'.
<h4>Exemplu querySelector()</h4>
<ul>
 <li>CoursesWeb.net</li>
 <li class='aclass'>MarPlo.net</li>
 <li class='aclass'>GamV.eu</li>
</ul>
<p style='background:#fbfbb0;'>La clic pe urmatorul buton (preluat cu querySelector) se afiseaza la #resp continutul din primul LI cu class='aclass'.</p>
<button id='btn1'>Click</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var btn = document.querySelector('#btn1');
btn.addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = document.querySelector('li.aclass').innerHTML;
});
</script>

querySelectorAll()

Metoda querySelectorAll() returneaza un array cu elementele care se potrivesc cu grupul de selectori specificati.
Sintaxa:
var elms = document.querySelectorAll('selectori');
- "selectori" e un sir cu unul sau mai multi selectori CSS, separati prin virgula.
- elms e un array cu obiectele HTML selectate.

Exemplu, se preiau intr-un array tag-urile LI cu class='sites', si tag-urile cu class='note' din elementul cu id='dv1' (adica selctorul: 'li.sites, #dv1 .note'); apoi afiseaza continutul din ele.
<h4>Exemplu querySelectorAll()</h4>
<ul>
 <li class='sites'>CoursesWeb.net</li>
 <li class='sites'>MarPlo.net</li>
 <li>GamV.eu.net</li>
</ul>
<div id='dv1'>
 Cursuri Web Development - <span class='note'>querySelector si querySelectorAll</span>
</div>
<p style='background:#fbfbb0;'>Se preiau intr-un array tag-urile LI cu class='sites', si tag-urile cu class='note' din #dv1 (cu selctorul: 'li.sites, #dv1 .note'), apoi, la clic pe urmatorul buton se afiseaza la #resp continutul lor.</p>
<button id='btn1'>Click</button>
<blockquote id='resp'>#resp</blockquote>

<script>
//array cu tag-urile LI cu class='sites', si tag-urile cu class='note' din elementul cu id='dv1'
var elms = document.querySelectorAll('li.sites, #dv1 .note');
var btn = document.querySelector('#btn1');
btn.addEventListener('click', (ev)=>{
 var re ='';

 // parcurge array-ul elms si preia in re un sir cu continutul din fiecare element
 for(var i=0; i<elms.length; i++) {
 re += elms[i].innerHTML +'<br>';
 }

 //afiseaza sirul in #resp
 document.getElementById('resp').innerHTML = re;
});
</script>

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 un array 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.
Sintaxa:
elm.querySelector('selectori')

elm.querySelectorAll('selectori')

- Iata un alt exemplu cu querySelectorAll(), selectarea se face pe un anumit element, nu pe "document".
<p style='background:#fbfbb0;'>Se preiau cu querySelectorAll() elementele din tag-ul cu id 'sites' returnate cu selctorul: 'li a'.<br>
 - Cand mouse-ul e deasupra urmatoarelor link-uri, se adauga in caseta de text adresa de la 'href'.</p>
Adresa URL: <input type='text' id='txt1' />
<ul id='sites'>
 <li><a href='//coursesweb.net/javascript' title='Curs JavaScript'>Curs JavaScript</a></li>
 <li><a href='//marplo.net/' title='Cursuri online'>Cursuri online</a></li>
</ul>

<script>
var txt1 = document.getElementById('txt1');

// preia tag-urile A din LI adaugate in elementul cu id='dv1'
var elms = document.getElementById('sites').querySelectorAll('li a');

// parcurge array-ul elms si inregistreaza 'mouseenter' la fiecare
for(var i=0; i<elms.length; i++){
 elms[i].addEventListener('mouseenter', (ev)=>{
 txt1.value = ev.target.href;
 });
}
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tip de <input> creaza o paleta de culori pentru selectare culoare?
type="text" type="color" type="date"
<input type="color" name="get_color" />
Care metoda CSS roteste elementul HTML la un anumit numar de grade?
scale() translate() rotate()
#some_id:hover {
  transform: rotate(60deg);
  -ms-transform: rotate(60deg);    /* IE 9 */
  -moz-transform: rotate(60deg);   /* Firefox */
}
Click pe functia care returneaza numarul cel mai mare.
pow() min() max()
var maxn = Math.max(8, 4, 88, 56);
alert(maxn);      // 88
Ce functie previne ca un fisier sa fie inclus mai mult de o data intr-o pagina?
include() include_once() require()
include_once("un_fisier.php");
Care este traducerea corecta pentru: "Ahead of time"?
Peste timp La timp Inainte de vreme
Most people arrived ahead of time.
- Cei mai multi oameni au sosit inainte de vreme (prea devreme).
Indicati traducerea corecta a cuvantului "buenĂ­simo"
mai bun mai putin bun extrem de bun
Este fruto es buenĂ­simo.
- Acest fruct este extrem /nemaipomenit de bun.
querySelector si querySelectorAll

Last accessed pages

  1. Curs si Tutoriale Ajax (22520)
  2. Verbe - Exercitii si teste engleza incepatori (12081)
  3. Curs si Tutoriale JavaScript (36515)
  4. Genul substantivelor 2 (3309)
  5. Creare CAPTCHA cod verificare anti-spam (214)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2433)
  2. Curs HTML gratuit Tutoriale HTML5 (1961)
  3. Curs si Tutoriale JavaScript (1835)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1748)
  5. Curs CSS Online Tutoriale CSS3 (1666)