Metodi di Selezione in Javascript

I selettori servono appunto per Selezionare (cercare) elementi HTML in base al tag, all'ID, alle classi, alla tipologia, agli attributi, ai valori degli attributi ecc…

Sintassi dei metodi di Selezione in Javascript

Sintassi di getElementById

document.getElementById('test') // selezione tramite l'ID del tag HTML (nessuna selezione multipla)

Sintassi di getElementsByClassName

//Seleziona tramite getElementsByClassName (solo lettura)
document.getElementsByClassName('txtClass');

//Seleziona elemento specifico tramite getElementsByClassName (e modificane il contenuto tramite INDICE) [0-9]
document.getElementsByClassName('txtClass')[0].innerHTML = "Questo elemento è stato cambiato";

//Selezione Multipla con getElementsByClassName (e modificane il contenuto)
// In questo caso vogliamo selezionare gli elementi che abbiano sia la classe "txtClass" che la classe "classeX"
let perClasse = document.getElementsByClassName("txtClass classeX");
// cicla gli elementi di "perclasse" e cambia il suo contenuto
for (elementi of perClasse) {
  elementi.innerHTML ="Questo Elemento è stato cambiato";
}; 
console.log(perClasse);

Sintassi di getElementsByTagName

//Seleziona tramite getElementsByTagName (solo lettura)
document.getElementsByTagName('p');

//Seleziona elemento specifico tramite getElementsByTagName (e modificane il contenuto tramite INDICE) [0-9]
document.getElementsByTagName('p')[4].innerHTML = "Questo elemento è stato cambiato";

//Selezione Multipla con getElementsByTagName (e modificane il contenuto)
// In questo caso vogliamo selezionare gli elementi che abbiano il tag 
let perClasse = document.getElementsByTagName("p");
// cicla gli elementi di "perclasse" e cambia il suo contenuto
for (elementi of perClasse) {
  elementi.innerHTML ="Questo Elemento è stato cambiato";
}; 
console.log(perClasse);

Sintassi di querySelector

// Seleziona tramite querySelector l'elemento avente id "#txtID1" e modificato
document.querySelector("#txtID1").innerHTML = "Questo Elemento è stato cambiato con querySelector tramite ID";

// Seleziona con querySelector e modifica SOLO IL PRIMO elemento avente la classe ".txtClass"
document.querySelector(".txtClass").innerHTML = "Questo Elemento è stato cambiato con querySelector tramite classe";

// Seleziona con querySelector e modifica SOLO IL PRIMO elemento con tag html "p"
document.querySelector("p").innerHTML = "QUESTO È IL PRIMO PARAGRAFO";

// Seleziona con querySelectore modifica SOLO IL PRIMO elemento (paragrafo) avente l'attributo title
document.querySelector("p[title]").innerHTML = "Questo elemento ha l'attributo title";

// Seleziona con querySelector e modifica SOLO IL PRIMO elemento (paragrafo) avente l'attributo title="example1"
document.querySelector("p[title='example1']").innerHTML = 'Questo elemento ha l\'attributo title="example1"';              

Sintassi di querySelectorAll

// Seleziona con querySelectorAll e modifica tutti gli elementi avente la classe ".txtClass"
const classeX = document.querySelectorAll(".txtClass");
for(elementi of classeX) {
  elementi.innerHTML = "Questi elementi sono stati cambiati con querySelectorAll";
};

// Seleziona con querySelectorAll e modifica tutti gli elementi (paragrafi)
const classeX = document.querySelectorAll("p");
for(elementi of classeX) {
  elementi.innerHTML = "Questi elementi sono stati cambiati con querySelectorAll";
};

// Seleziona con querySelectorAll e modifica tutti gli elementi (paragrafi) avanti l'attributo "title"
const classeX = document.querySelectorAll("p[title]");
for(elementi of classeX){
elementi.innerHTML = "Questo elemento ha l'attributo title";
};

// Seleziona con querySelectorAll e modifica tutti gli elementi (paragrafi) avanti l'attributo "title" con valore "example2"
const classeX = document.querySelectorAll("p[title='example2']");
for(elementi of classeX){
elementi.innerHTML = "Questo elemento ha l'attributo title con valore example2";
};

let modifica = 'Questo elemento è stato modificato. Con ';

// getElementById : seleziona e modifica tramite ID
document.getElementById('txtID1').innerHTML = modifica + "getElementById";


// getElementsByClassName : seleziona tramite classe e modifica usando l'indice [0-9]
document.getElementsByClassName('txtClass1')[1].innerHTML = modifica + "getElementsByClassName";
// getElementsByClassName : seleziona tramite classe e modifica TUTTE le volte che lo incontra con ciclo for
const selClasse = document.getElementsByClassName("txtClass2");  // cerca l'elemento selezione
    for(let i = 0; i < selClasse.length; i++){
        selClasse[i].innerHTML = modifica + "getElementsByClassName + ciclo for";    // Change the content
    };
// getElementsByClassName : seleziona tramite classe e modifica TUTTE le volte che lo incontra con ciclo for of
const selClasse1 = document.getElementsByClassName("txtClass3");  // cerca l'elemento selezione
    for(elemento of selClasse1){
        elemento.innerHTML = modifica + "getElementsByClassName + ciclo for..of";    // Change the content
    };


// getElementsByTagName : seleziona tramite classe e modifica usando l'indice [0-9]
document.getElementsByTagName('p')[10].innerHTML = modifica + "getElementsByTagName";
// getElementsByTagName : seleziona tramite TAG HTML e modifica TUTTE le volte che lo incontra con ciclo for...of
const selClasse2 = document.getElementsByTagName("note");  // cerca l'elemento selezione
    for(elemento of selClasse2){
        elemento.innerHTML = "
" + modifica + "getElementsByTagName + ciclo for of
";    // Change the content
    };


// querySelector : seleziona SOLO IL PRIMO elemento incontrato tramite classe e modifica 
document.querySelector('.txtClass4').innerHTML = modifica + "querySelector";
// querySelector: seleziona il primo elemento con TAG HTML  e modifica
document.querySelector('samp').innerHTML = modifica + "querySelector
";
// querySelector: seleziona il primo elemento con TAG HTML 
 avente come attributo title="example11" e modifica
document.querySelector('p[title=example11]').innerHTML = modifica + "querySelector su attributo title con valore example11
";
// querySelector: seleziona l'elemento con ID txtID17  e modifica
document.querySelector('#txtID17').innerHTML = modifica + "querySelector su attributo title con valore example11
";


// querySelectorAll : seleziona tramite classe  e modifica TUTTE le volte che lo incontra con ciclo for of
let selClasse3 = document.querySelectorAll('.txtClass5');
for (elemento of selClasse3) {
    elemento.innerHTML = modifica + "querySelectorAll + ciclo for...of";
};
// querySelectorAll : seleziona tramite classe  e modifica TUTTE le volte che lo incontra con ciclo for
let selClasse4 = document.querySelectorAll('.txtClass6');
for (let i = 0 ; i < selClasse4.length ; i++) {
    selClasse4[i].innerHTML = modifica + "querySelectorAll + ciclo for";
};
// querySelectorAll : seleziona tramite classe (in modo specifico) e modifica TUTTE le volte che lo incontra con ciclo for of
let selClasse5 = document.querySelectorAll('div.boxTXT > .txtClass7');
for (elemento of selClasse5) {
    elemento.innerHTML = modifica + "querySelectorAll + ciclo for...of ";
};
// querySelectorAll : seleziona tramite TAG HTML di tutti gli elementi 
 che contengono l'attributo title con valore "otherExample1" e modifica TUTTE le volte che lo incontra con ciclo for of
let selClasse6 = document.querySelectorAll('p[title="otherExample1"]');
for (elemento of selClasse6) {
    elemento.innerHTML = modifica + "querySelectorAll + ciclo for...of ";
};