Curs Javascript


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
Care atribut specifica adresa unde sunt trimise datele din formular?
method action name
<form action="script.php" method="post"> ... </form>
Ce proprietate CSS desparte cuvinte lungi, adaugand pe rand nou?
word-wrap line-height font-size
#id {
  width: 100px;
  word-wrap: break-word;
}
Ce functie aranjeaza elementele din array in ordine alfabetica, bazat pe valorile lor?
pop() sort() shift()
var tutorials = ["php", "html", "css", "flash"];
tutorials.sort();
alert(tutorials[0]);          // css
Indicati functia care returneaza valoarea ultimului element din array.
current() next() end()
$code =[10=>"Perl", 20=>"PHP", 21=>"Python", 30=>"JavaScript");
$last = end($code);
echo $last;      // JavaScript
Alegeti verbul auxiliar corect care trebuie in propozitia: "Her plane ... just arrived".
have has does
Her plane has just arrived.
- Avionul ei tocmai a sosit.
Indicati forma corecta a verbului SER (a fi) in propozitia: "Vosotros ... muy simpáticos".
son soy sois
Vosotros sois muy simpáticos.
- Sunteti foarte simpatici.
querySelector si querySelectorAll

Last accessed pages

  1. Curs HTML gratuit Tutoriale HTML5 (110019)
  2. Gramatica limbii spaniole. Indrumator si prezentare generala (42736)
  3. Curs si Tutoriale Ajax (57819)
  4. Operatori in JavaScript (4653)
  5. Efecte jQuery simple de ascundere si afisare (434)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1120)
  2. Curs HTML gratuit Tutoriale HTML5 (1048)
  3. Curs si Tutoriale JavaScript (839)
  4. Curs CSS Online Tutoriale CSS3 (765)
  5. Curs PHP MySQL, Tutoriale si Scripturi PHP (746)