Javascript ottenere testo HTML interno per campata in base al nome della classe

Question

Questo è il formato di base del codice della tabella è contenuta all'interno di un div chiamato

<div class="leftCol">  
..... 
<tr id="my_cd"> 
<td><span class="agt_span">My Code</span></td> 
</tr> 
..... 
</div> 

ho bisogno di essere in grado di ottenere tutto ciò che testo è contenuto entro l'arco classe, in questo caso ho bisogno di tirare il testo "My Code" e quindi aggiungerlo in un array. Aggiungere il testo in un array non è un problema facile, ma non riesco a capire come estrarre il testo. Non importa quello che cerco, non posso ottenere altro che un valore 'indefinito'.

Come si ottiene il valore del testo HTML interno per un intervallo in base al nome della classe?

Prima domanda risolta grazie !!

Seconda domanda espandere prima:

<div class="leftCol">  
..... 
<tr id="my_cd"> 
    <td><span class="agt_span">My Code</span></td> 
    <td> 
    <div> 
     <select name="agt_drp" id="agt_drp" class="agt_drp">...</select> 
    </div> 
    </td> 
</tr> 
</div> 

Diciamo che ho la select id "agt_drp" e voglio ottenere il testo span class. C'è un modo per farlo?

Answer 1

Jquery:

var test = $("span.agt_span").text(); 
alert(test): 

Javascript: http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Answer 2

in javascript vaniglia, è possibile utilizzare getElementsByClassName():

var htmlString = document.getElementsByClassName('agt_span')[0].innerHTML; 

https://jsfiddle.net/ky38esoo/

Avviso l'indice alla base del metodo .

Answer 3

JQuery:

$('span.agt_span').text(); 

Pure JavaScript (è necessario specificare la posizione del vostro elemento classe: [0] per ottenere il primo):

document.getElementsByClassName('agt_span')[0].innerHTML; 

Se si dispone di multipli di elementi con questa classe , è possibile loop su:

var elts = document.getElementsByClassName('agt_span'); 
for (var i = 0; i < elts.length; ++i) { 
    alert(elts[i].innerHTML); 
} 

Answer 4

Anche se getElementsByClassName sembra essere supportato da tutti i principali browser, che ora è argomento per usarlo. Per mantenere il tuo codice compatibile e utile, usa meglio lo standard W3C DOM Level 3 Core. L'ID documento non descrive un tale metodo lì!

Quindi, si prega di utilizzare

var table = document.getElementById("my_cd"); /* id is unique by definition! */ 
var spans = table.getElementsByTagName("span"); 
var txt; 

for(i in spans) { 
    if(spans[i].getAttribute("class").contains("agt_span")){ 
     txt = spans[i].firstChild; /* a span should have only one child node, that contains the text */ 
    } 
} 
return txt; 

Questo metodo non è perfetto, come hai veramente bisogno di dividere il spans[i].getAttribute("class").split(" ") sui caratteri di spazio e verificare se questo array contiene "agt_span".

A proposito: innerHTML non ha nemmeno l'attributo DOM. Ma puoi implementare qualsiasi cosa in modo compatibile e flessibile usando il DOM W3C e sarai sicuro di scrivere un codice efficace e compatibile.

Se i programmatori js avevano utilizzato i documenti W3C e se non c'erano Internet Explorer per infrangere tutte le regole ECMAScript e W3C, non ci sarebbero mai state molte incompatibilità tra tutte quelle versioni del browser.