如何在不使用 jQuery 的情况下获取标签内的文本答案

【问题标题】：How to get the text within a tag without using jQuery如何在不使用 jQuery 的情况下获取标签内的文本
【发布时间】：2014-03-12 06:05:10
【问题描述】：

我正在查看Getting value from table cell in javascript...not jquery 页面上的一个示例，其中有人展示了如何使用 JavaScript 从表格中获取文本：

var refTab=document.getElementById("ddReferences") 
var  ttl; 
// Loop through all rows and columns of the table and popup alert with the value 
// /content of each cell. 
for ( var i = 0; i<refTab.rows.length; i++ ) { 
  var row = refTab.rows.item(i); 
  for ( var j = 0; j<row.cells.length; j++ ) { 
    var col = row.cells.item(j);
    alert(col.firstChild.innerText); 
  } 
}

我想知道，如果我想简单地抓取第 1 行第 1 列的单元格中的文本，我可以不执行以下操作吗？如果没有，为什么不呢？

var myText = document.getElementById("ddReferences").rows.item(0).cells.item(0).firstChild.innerText;

当我在我尝试创建的网页中尝试它时它不起作用。（是的，我知道一个叫做 JQuery 的东西。我知道有人会告诉我学习它。也许有一天我会的。）

【问题讨论】：

它工作正常：jsfiddle.net/2MLSZ
其实我可以重现这个问题。它适用于 Chrome 和 IE，但不适用于 FireFox，我认为这是 OP 正在使用的。我试图发布答案，但我不能，因为该问题被错误地关闭为不可重现。提名重新开放。

标签： javascript firefox cross-browser

【解决方案1】：

您使用的是 FireFox 吗？ innerText doesn't work in FireFox（见橙色“有帮助的回复”）。

链接的 Mozialla 支持论坛帖子和它引用的博客帖子都建议使用 textContent 代替 innerText。虽然这对于一行简单的文本可以正常工作，但请注意它们不相同。 textContent 返回元素内的文本，因为它写入源代码（忽略标签），而 innerText 返回文本在页面上呈现的样子。

例如，使用以下 HTML

<table id="ddReferences">
  <tr>
    <td>
      <span>foo bar</span>
    </td>
  </tr>
</table>

两个

document.getElementById("ddReferences").rows.item(0).cells.item(0).firstChild.innerText

和

document.getElementById("ddReferences").rows.item(0).cells.item(0).firstChild.textContent

给你：

foo bar

但是，使用此 HTML：

<table id="ddReferences">
  <tr>
    <td>
      <span>foo<br>bar</span>
    </td>
  </tr>
</table>

innerText 为您提供：

foo
bar

而 textContent 为您提供：

foobar

...并使用此 HTML：

<table id="ddReferences">
  <tr>
    <td>
      <span>
        foo
        bar
      </span>
    </td>
  </tr>
</table>

innerText给你

foo bar

而 textContent 为您提供

        foo
        bar

用小提琴做一些实验，你会发现不同。

【讨论】：

【解决方案2】：

问题是innerText 是一个非标准的 MS 属性，并且在某些浏览器上不受支持。

标准的或多或少的等价物是textContent。

然后，以下应该可以工作：

document.getElementById("ddReferences")
    .rows.item(0)
        .cells.item(0)
            .firstChild
                .textContent;

Demo

【讨论】：