Ottenere elementi

[radiodelmomento]

In una pagina web si trova il seguente codice:

<span id="label_001">testo</span>
<span id="label_002">testo</span>
<span id="label_005">testo</span>
<span id="altro_006">testo</span>

E, tramite JS (puro, niente JQuery), devo ottenere i valori legati a "label_" separati da un separatore, ad esempio la virgola.
Quindi otterrei "001,002,005,". Non mi servono funzioni per eliminare la virgola finale, può starci.
Vi ringrazio.

[karl94]

Quindi lo script cosa dovrebbe andare a cercare? Tutti gli elementi con id che comincia con label_? Questi elementi devono essere tutti span? Sono per caso tutti figli diretti del medesimo elemento?

[radiodelmomento]

Deve cercare tutti gli elementi con id che comincia con label_?

No, deve cercare il numero che segue l'elemento che inizia con label_.
Al massimo potrei trovare il nome di tutti gli elementi e alla fine eliminare tutti i label_.

Questi elementi devono essere tutti span?

Sì

Sono per caso tutti figli diretti del medesimo elemento?

No, gli elementi sono figli di un elemento ma non diretti.

[karl94]

Usando il metodo getElementsByTagName sul nodo che contiene gli elementi che ti interessano (può anche essere il nodo documento) puoi ottenere la lista degli span, poi è sufficiente iterare i suoi valori verificando per ciascuno di questi se l'attributo id comincia per label_, in tal caso estraendo il resto dell'id e conservandolo appositamente è possibile creare la stringa da te descritta.

function insertNameHere(containerNode){
	var elements = containerNode.getElementsByTagName("span");
	var ids = [];
	for(var i = 0; i < elements.length; i++){
		if(elements[i].id.indexOf("label_") == 0){
			ids.push(elements[i].id.substr(6));
		}
	}
	return ids.toString();
}

P.s.: quando un figlio non è diretto, solitamente viene detto discendente.

Anzi, volendo puoi usare anche il metodo querySelectorAll, che restituisce tutti gli elementi indicati da un dato selettore CSS. Nel tuo caso il selettore sarebbe span[id^=lable_], e il resto dello script non dovrebbe far altro che estrarre la porzione dell'id desiderata.

function insertNameHere(containerNode){
	return Array.prototype.map.call(containerNode.querySelectorAll("span[id^=label_]"), function(e){
		return e.id.substr(6);
	}).toString();
}

[radiodelmomento]

Ok, ma c'è un problema: tutti i valori dell'array tranne il primo hanno il prefisso "text_".

[karl94]

A quale array ti riferisci? Quello contenuto nella variabile ids? Se è così, allora gli attributi id dei vari elementi non sono solo della forma label_???. Spiega in dettaglio la situazione.

[radiodelmomento]

Epic fail.
Nel documento si trovano elementi sia con id "label_ID" che con id "label_text_ID".
Fortunatamente per ogni "label_" c'è il corrispondente "label_text_", quindi mi basta sostituire il prefisso e il valore substr.

A scopo informativo/didattico mi potresti dire:
- cosa significa if(elements[ i].id.indexOf("label_") == 0){ e perché deve essere uguale a zero/nullo/non settato?
- se avessi dovuto prendere in considerazione "label_" sapendo che ci sono anche "label_text_", come mi sarei dovuto comportare?
Ti ringrazio.

[karl94]

- cosa significa if(elements[ i].id.indexOf("label_") == 0){ e perché deve essere uguale a zero/nullo/non settato?

Dunque, il quello script la variabile elements contiene la lista degli elementi span contenuti in un dato nodo, quindi è necessari andare a prendere solo quelli che hanno id che comincia con la data stringa.
elements[i].id è una normale stringa JavaScript, il metodo indexOf cerca nella stringa su cui viene richiamato la prima occorrenza della stringa fornita per parametro, e restituisce un numero rappresentante la posizione in cui ha trovato la seconda stringa nella prima, o meno uno se non è stata trovata la corrispondenza. In questo caso la condizione serve a verificare che l'attributo id dell'elemento cominci proprio per label_.

- se avessi dovuto prendere in considerazione "label_" sapendo che ci sono anche "label_text_", come mi sarei dovuto comportare?
Ti ringrazio.

Io avrei aggiunto un if, sempre all'interno del for, che verificasse la medesima condizione ma per la stringa label_text_, nel corpo di questo poi avrei usato la medesima istruzione cambiando opportunamente il valore passato al metodo substr, l'altro if poi l'avrei incluso nell'else di quello appena aggiunto. In codice:

function insertNameHere(containerNode){
	var elements = containerNode.getElementsByTagName("span");
	var ids = [];
	for(var i = 0; i < elements.length; i++){
		if(elements[i].id.indexOf("label_text_") == 0){
			ids.push(elements[i].id.substr(11));
		}else if(elements[i].id.indexOf("label_") == 0){
			ids.push(elements[i].id.substr(6));
		}
	}
	return ids.toString();
}

Non è però incluso un controllo per eventuali doppioni.

[radiodelmomento]

Perfetto, grazie mille