如何在JavaScript中获取HTML元素的值？

Question

我在代码中遇到了一个问题，无法获取特定字段的值。这里有一个非常简单的示例来展示我的问题，以下是JSFiddle链接：https://jsfiddle.net/c3jtg60v/

HTML 代码：

<p id="theInput">
   desired-value
</p>

Javascript代码：

var value = document.getElementById("theInput").value;
console.log(value);

目前，我给一个id为“theInput”的p元素分配了所需的值，并希望在我的javascript中使用它。

此刻，我只是想console.log这个值，但是当我这样做时，控制台中记录的所有内容都是“undefined”。我真正想要记录到控制台的是“所需的值”。

- Jesper

---

可能是获取innerhtml值到变量中的重复问题。 - Stack learner

请参见此处：http://stackoverflow.com/questions/39268806/how-to-get-the-label-value-in-javascript - Kalu Singh Rao

Answer 1

.value 指的是一个 value 属性，P 标签不能设置这个属性。如果你想获取一个 html 标签的内部文本，可以采用以下方法：

var value = document.getElementById("theInput").innerHTML;

- Saskia

---

如果您只想获取文本内容，最好使用innerText而不是innerHTML；如果您还想获取标签，请使用innerHTML。 - Sandip - Frontend Developer

不，innerText并非所有浏览器都支持，而innerHTML则是全局支持的。 - Saskia

InnerText被几乎所有现代浏览器支持 https://www.w3schools.com/jsref/prop_node_innertext.asp - Daniel B

Answer 2

var value = document.getElementById("theInput").innerHTML;
console.log(value);

- Pranjal

---

请考虑在您的答案中添加上下文。 - Daniel L. VanDenBosch

Answer 3

如果您只想获取文本，请使用innerText，而不是innerHTML。如果您想获取标签和文本，请使用innerHTML。

innerText：仅提供文本

innerHTML：提供文本和HTML

 var value = document.getElementById("theInput").innerText;
 console.log(value);
 value = document.getElementById("theInput").innerHTML;
 console.log(value);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="theInput">
     desired-value
     <span>test</span>
</p>

- Sandip - Frontend Developer

Answer 4

var msg = document.getElementById('theInput').innerHTML;
alert(msg);

<p id="theInput">
   desired-value
</p>

- Kalu Singh Rao

Answer 5

应该使用textContent而不是value。

var value = document.getElementById("theInput").textContent;
console.log(value);

- Tarandeep Singh

Answer 6

使用innerHTML：

var value = document.getElementById("theInput").innerHTML;
console.log(value);

{{链接1：JS Fiddle}}

- Serraniel

Answer 7

.value 不返回内部文本。您应该使用 .textContent 或 .innerHTML。使用以下之一。

var value1 = document.getElementById("theInput").innerHTML;
console.log(value1);

var value2 = document.getElementById("theInput").textContent;
console.log(value2);

- Tarek Salah uddin Mahmud

Answer 8

在 JavaScript 中，.value 属性仅用于返回“表单”中使用的标签（如 input 标签）的值。 你想要做的是使用 innerHTML 属性，它返回 HTML 标签内部内容的值。
因此

var value = document.getElementById("theInput").innerHTML;
console.log(value);

这将是正确的方式

- Atul Nepal

Answer 9

如果你要查找的HTML元素没有“id”标签，还有另外一种解决方案。 官方的做法是，如果你想获取元素的“value”值，应该这样做：

var value = document.getElementById("someId").value

但有时该元素没有“id”，因此您可以使用类似以下的内容：

var element =  document.getElementsByClassName("className") as HTMLCollectionOf<HTMLElement>

这将返回一个 HTML 元素的集合。然后，您只需要通过它的索引选择要使用的元素，并取得它的值，像这样：

var value = element[index]['value']

- Tarantino