Javascript Javascript按类名获取span的内部HTML文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31007427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript get inner HTML text for span by class name
提问by George Gervin
This is the basic format of the code the table is contained within a div named
这是表包含在名为的 div 中的代码的基本格式
<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.
我需要能够获取 span 类中包含的任何文本，在这种情况下，我需要提取文本“我的代码”，然后将其添加到数组中。将文本添加到数组中并不是一个简单的问题，但我不知道如何提取文本。无论我尝试什么，我只能得到一个“未定义”的值。
How do I get the Inner HTML text value for a span by class name?
如何按类名获取跨度的内部 HTML 文本值？
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?
假设我有 select id "agt_drp" 并且我想获取 span 类文本。有没有办法做到这一点？
回答by NubPro
Jquery:
查询：
var test = $("span.agt_span").text();
alert(test):
Javascript: http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
Javascript：http: //www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
回答by Konstantin
in vanilla javascript, you can use getElementsByClassName():
在原版 javascript 中，您可以使用 getElementsByClassName()：
var htmlString = document.getElementsByClassName('agt_span')[0].innerHTML;
https://jsfiddle.net/ky38esoo/
https://jsfiddle.net/ky38esoo/
Notice the index behind the method.
注意方法后面的索引。
回答by Magicprog.fr
JQuery:
查询：
$('span.agt_span').text();
Pure JavaScript (you need to specify the position of your class element: [0]to get the first one):
纯 JavaScript（您需要指定类元素的位置：[0]获取第一个元素）：
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);
}
回答by ikrabbe
Though getElementsByClassNameseems 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!
虽然getElementsByClassName似乎所有主要浏览器都支持，但现在使用它的论据。为了保持您的代码兼容和有用，最好使用 W3C 标准DOM 级别 3 核心。Document IDL 在那里没有描述这样的方法！
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".
这种方法并不完美，因为您实际上需要拆分spans[i].getAttribute("class").split(" ")空格字符并检查此数组是否包含“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.
顺便说一句：innerHTML 也不是 DOM 属性。但是您可以使用 W3C DOM 以兼容且灵活的方式实现任何内容，并且您一定会编写有效且兼容的代码。
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.
如果 js 程序员使用了 W3C 文档，并且如果没有 Internet Explorer 打破所有这些 ECMAScript 和 W3C 规则，那么所有这些浏览器版本之间永远不会有这么多的不兼容性。
