querySelector si querySelectorAll

querySelectorAll()

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>

<<-Utilizare getElementsByTagName in JS -- createElement si insertBefore->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag se foloseste pentru a crea o caseta de adaugare text?

<input type="text" name="a_name" value="val" />

Ce proprietate CSS se foloseste pentru a afisa textul cu majuscule-mici?

display font-variant font-style

h3 {
  font-variant: small-caps;
}

Ce instructiune afiseaza o fereastra cu un mesaj in ea?

for() Date() alert()

var msg = "Viziteaza CoursesWeb.net";
alert(msg);

Indicati codul PHP prin care se obtine IP-ul utilizatorului.

$_SERVER["HTTP_USER_AGENT"] $_SERVER["REMOTE_ADDR"] $_GET[]

$ip = $_SERVER["REMOTE_ADDR"];
echo $ip;

Cum se traduce cuvantul "actually"?

actual de fapt acum

He actually came on time.
- De fapt, el a venit la timp.

Cum se traduce expresia: "Hace buen tiempo"?

Face timp E vreme frumoasa Drum bun

Hoy hace buen tiempo.
- Astazi e vreme frumoasa.