Javascript按类名获取内部HTML文本

Question

This is the basic format of the code the table is contained within a div named

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

I need to be able to get whatever text is contained within the span class, in this case I need to pull the text "My Code" and then add that into an array. Adding the text into an array is not the issue that's easy but I can't figure out how to pull the text. No matter what I try I can't get anything but an 'undefined' value.

How do I get the Inner HTML text value for a span by class name?

First Question solved thanks!!

Second question expand on first:

<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>

Let's say I have the select id "agt_drp" and I want to get the span class text. Is there any way to do that?

Answer 1

Jquery:

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

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

Answer 2

in vanilla javascript, you can use getElementsByClassName():

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

https://jsfiddle.net/ky38esoo/

Notice the index behind the method.

Answer 3

JQuery:

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

Pure JavaScript (you need to specify the position of your class element: [0] to get the first one):

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

If you have multiples elements with this class, you can loop on it:

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

Answer 4

Though getElementsByClassName seems to be supported by all major browser, that is now argument to use it. To keep your code compatible and usefull, better use the W3C Standard DOM Level 3 Core . The Document IDL does not describe such a method there!

So please use

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;

This method isn't perfect, as you actually need to split the spans[i].getAttribute("class").split(" ") on space chars and check if this array contains "agt_span".

By the way: innerHTML is no DOM Attribute too. But you can implement anything in a compatible and flexible way using W3C DOM and you will be sure to write effective and compatible code.

If the js programmers had used the W3C Documents and if there weren't no Internet Explorer to break all those ECMAScript and W3C rules, there would never have been that many incompatibilities between all those browser versions.