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 atribut indica faptul ca un camp de formular trebuie completat?

required="required" autofocus="autofocus" placeholder="text"

<input type="text" name="name1" required="required" />

Ce metoda CSS misoreaza sau mareste dimensiunile unui element (inclusiv continutul)?

translate() scale() skew()

#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}

Click pe metoda obiectului Date care returneaza ziua din luna.

setDate() getMonth() getDate()

var rightnow = new Date();
var day = rightnow.getDate();
alert(day);

Ce functie este folosita pentru a incarca un fisier pe server?

is_file() move_uploaded_file() fopen()

if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "Fisierul a fost incarcat";
}

Cum se spune in engleza expresia: "Ploua cu galeata"?

rain cats and dogs rain buckets quiet rain

In Bucharest it`s raining cats and dogs.
- In Bucuresti ploua cu galeata.

Cum se spune in spaniola expresia: "Ploua cu galeata"?

llover cubo llover a cántaros lluvia tranquila

En Madrid está lloviendo a cántaros.
- In Madrid ploua cu galeata.