如何获取嵌套Span HTML元素的文本？

Question

我希望从以下HTML代码的嵌套SPAN元素中获取文本：

```html

以下是需要翻译的内容：

```

请注意，保留了HTML标记。

<span id='result_box'>
<span class="hps">text_content</span>
</span>

我希望能够使用JavaScript获取"text_content"的值。

我已经尝试过，但是遇到了问题：

var resBox=document.getElementById('result_box');
var strTrans=resBox.getElementsByTagName('span')[0].innerHTML;
alert(strTrans);

编辑：实际上我想从在线页面进行此操作

- Ganpat

---

你的错误是什么？这段代码在这个jsfiddle中运行良好：http://jsfiddle.net/Ralt/TrR62/ - Florian Margaine

没有任何内容显示，但最后的警告框没有出现。 - Ganpat

Answer 1

你的代码运行良好。我猜测你的问题是在DOM没有完全加载时执行这些代码。如果你正在测试某些东西，可以尝试以下方法。

window.onload = function () {
   //put your code here,it will alert when page loaded completely.
}; 

或者将脚本放在您的 span 元素之后。像这样。

<span id='result_box'>
  <span class="hps">text_content</span>
</span>
<script type='text/javascript'>
   var resBox=document.getElementById('result_box');
   var strTrans=resBox.getElementsByTagName('span')[0].innerHTML;
   alert(strTrans);// it will alert
</script>

- chris

---

+1 非常好的答案。除了 Chris 写的之外，还要注意如果你的“嵌套 span”是动态创建的，它可能还不能使用。 - arttronics

Answer 2

您可以通过类名获取元素，使用document.getElementsByClassName()方法，然后从结果节点列表中获取第一个项目。

window.onload = function () {
   document.getElementsByClassName("hps")[0].innerHTML
};     

jsfiddle

- bipen

Answer 3

var resBox=document.getElementById('result_box');
var strTrans=document.getElementsByTagName('span')[0].innerText;
alert(strTrans);​

或更好

strTrans = document.querySelector(".hps").innerText ;

- mpm

Answer 4

明白了，我猜你在HTML页面中嵌入了一个链接，然后想要操作嵌入的页面中的DOM，对吗？如果是这样，你可以检查浏览器同源策略。

如果你想通过Google实现在线翻译，你可以搜索“Google翻译API”，Google为其他人提供API，以便在他们自己的应用程序中实现在线翻译。

似乎Bing也提供了API。我不确定。

- chris