Question

这是表包含在名为

的div中的代码的基本格式

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

我需要能够获得span类中包含的任何文本，在这种情况下，我需要提取文本＆＃34; My Code＆＃34;然后将其添加到数组中。将文本添加到数组中并不是一件容易的问题，但我无法弄清楚如何提取文本。无论我尝试什么，我都无法得到任何东西，除了一个未定义的＆＃39;值。

如何按类名获取跨度的内部HTML文本值？

第一个问题解决了谢谢!!

第二个问题首先扩展：

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

让我们说我有选择ID＆＃34; agt_drp＆＃34;我想获得span类文本。有没有办法做到这一点？

Answer 1

Jquery的：

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

使用Javascript： http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Answer 2

在vanilla javascript中，您可以使用getElementsByClassName（）：

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

https://jsfiddle.net/ky38esoo/

注意方法背后的索引。

Answer 3

JQuery：

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

纯JavaScript（你需要指定你的类元素的位置：[0]来获得第一个）：

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

如果你有这个类的多个元素，你可以循环它：

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

Answer 4

虽然getElementsByClassName似乎得到了所有主流浏览器的支持，但现在可以使用它。为了使您的代码兼容且有用，请更好地使用W3C标准版DOM Level 3 Core。 Document IDL没有在那里描述这样的方法！

所以请使用

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;

这种方法并不完美，因为你实际上需要在空间字符上拆分spans[i].getAttribute("class").split(" ")并检查这个数组是否包含＆＃34; agt_span＆＃34;。

顺便说一句：innerHTML也没有DOM属性。但是你可以使用W3C DOM以兼容和灵活的方式实现任何东西，你将确保编写有效且兼容的代码。

如果js程序员使用过W3C文档，并且没有Internet Explorer可以破坏所有这些ECMAScript和W3C规则，那么所有这些浏览器版本之间就不会有那么多的不兼容性。

Javascript按类名获取内部HTML文本

4 个答案: