javascript - 如何获取嵌套跨度 HTML 元素的文本？

Question

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

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

编辑：其实我想从在线页面做到这一点

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>

Answer 2

您通过类​​名获取元素..document.getElementsByClassName()然后从结果节点列表中获取第一项

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

jsfiddle

Answer 3

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

或更好

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

Answer 4

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

如果你想通过 google 实现在线翻译，你可以 google 'google translate api'，google 提供了一个 api 给其他人在他们自己的应用程序中实现在线翻译。

似乎bing也提供了一个api。我不确定。