如何获取 div 文本值？答案

【问题标题】：How to get div text value?如何获取 div 文本值？
【发布时间】：2013-11-12 14:02:34
【问题描述】：

我有以下 html：

<div class="question">
    <div class="text">
          Blah Blah
    </div>
</div>

我正在尝试使用 javascript 获取值“Blah Blah”。

类似的东西？

    alert(document.getElementsByName("question")[0].value);

【问题讨论】：

Get the pure text without HTML element by javascript? 的可能重复项 - 看看 this answer

标签： javascript html

【解决方案1】：

你可以这样做

alert(document.getElementsByClassName("question")[0].children[0].innerHTML);

【讨论】：

一般情况下不是很好。如果您只需要文本，请使用textContent。
@TimDown 很高兴知道，但 textContent 是否适合 IE？
它是 IE 9+。还有 innerText 一路回到 IE 4。

【解决方案2】：

您需要先正确选择元素。它没有（也不能）有name 属性，所以getElementsByName 是错误的。您可以使用getElementsByClassName 或（支持更有限）新的闪亮的querySelector：

var div = document.querySelector('.question');

那么你需要得到它的“价值”。它不是表单控件，因此它没有value 属性。它有childNodes，你关心的是另一个div。

var childDiv = div.querySelector('.text');

如果您正在使用 querySelector 并仅使用后代组合器，则可以跳过这两个阶段：

var childDiv = document.querySelector('.question .text');

然后这个子 div 有另一个子节点，但它是一个文本节点而不是一个元素节点。你可以像这样得到它：

var textNode = div.firstChild;

最后，您可以使用 data 属性在 textNode 中获取文本。

var text = textNode.data;

如果你把它们放在一起：

alert(document.querySelector('.question .text').firstChild.data);

如：http://jsfiddle.net/LR93S/

【讨论】：

【解决方案3】：

document.getElementsByClassName('question')[0].innerText;

或

document.querySelector('.question').innerText;

【讨论】：

【解决方案4】：

这里不需要依赖jQuery，使用innerText

document.querySelectorAll('div.question')[0].innerText

【讨论】：

【解决方案5】：

 $('.question').text(); // jquery

 document.getElementsByClassName("question")[0].innerText; // javascript

【讨论】：

【解决方案6】：

试试这个：document.getElementsByClassName("text")[0].innerHTML (http://jsfiddle.net/hv9Dx/15/)

【讨论】：

【解决方案7】：

最简单的方法是使用 jquery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
var divvalue = $('.text').html()
alert (divvalue);

您也可以更改您的 html 以使用 ID

<div class="question">
<div id="text">
      Blah Blah
</div>
</div>

并使用：

document.getElementById("text").innerHTML;

示例：http://jsfiddle.net/DanBrown180/N9Z8Z/

【讨论】：

【解决方案8】：

document.querySelectorAll('.text')[0].innerHTML

【讨论】：

【解决方案9】：

以下示例：

<div class="question" id="question">
    <div class="text" id="text">
      Blah Blah
    </div>
</div>

您可以尝试像这样获取其内部 div 标签的值：

alert(document.getElementById('question').childNodes[1].innerHTML);

干杯！

【讨论】：

【解决方案10】：

使用标准 DOM 属性textContent，它得到了广泛的支持和标准化，不像innerText：

document.getElementsByClassName("question")[0].textContent;

如果你需要支持 IE document.getElementsByClassName() 和 textContent 都不支持。

对于第一个问题，使用其他 DOM 方法 (example) 编写/找到一个通过类名检索元素的函数并不难。

对于第二个，您可以使用 IE 的 innerText 属性，它与 textContent 的作用大致相同（but not precisely）。

【讨论】：