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
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. OOP - Clase si Obiecte - Creare Clasa (3842)
  2. Curs HTML gratuit Tutoriale HTML5 (125188)
  3. Curs CSS Online Tutoriale CSS3 (75252)
  4. Formatare text in pagina html (24759)
  5. MySQL JOIN, INNER, LEFT, RIGHT (2300)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2644)
  2. Curs HTML gratuit Tutoriale HTML5 (2433)
  3. Curs si Tutoriale JavaScript (1919)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1707)
  5. Curs CSS Online Tutoriale CSS3 (1579)