document.getElementById("test").value 和 document.getElementById("test").innerHTM

Posted 2023-05-07

【中文标题】document.getElementById("test").value 和 document.getElementById("test").innerHTML 有啥区别

【英文标题】：What's the difference between document.getElementById("test").value and document.getElementById("test").innerHTMLdocument.getElementById("test").value 和 document.getElementById("test").innerHTML 有什么区别

【发布时间】：2012-02-21 20:32:22

【问题描述】：

document.getElementById("test").value

document.getElementById("test").innerhtml

第一个表示地址，第二个表示存储在该地址的值吗？另外，我在哪里可以找到关于 value 属性的文档？

【问题讨论】：

w3schools site 有一个很好的reference on the HTML DOM。

@BrianRogers - 请不要推荐 w3schools。请参阅w3fools.com 了解原因。

@Oded - 我发现他们的 HTML DOM 参考非常有用。如果您对该网站有如此强烈的感觉，那么推荐 HTML DOM 的替代参考对您来说会更有建设性。

@BrianRogers - 当然可以。 MDN 很棒。事实正确。

【参考方案1】：

.value 为您提供表单元素的当前设置值（input、select、textarea），而.innerHTML 基于元素包含的 DOM 节点构建 HTML 字符串。

举个简单的例子，转到JS Fiddle demo，然后在input 中输入一个新值，然后移出输入。

测试使用以下 javascript：

document.getElementById('input').onchange = function()
    alert('innerHTML: ' + document.getElementById('input').innerHTML + '; whereas value: ' + document.getElementById('input').value);
;

（上面的文字更新，在am not i am留下的评论之后，在下面的cmets中。）

【讨论】：

如果您改为说 ".innerHTML 基于元素包含的 DOM 节点构建 HTML 字符串"（或类似的东西），我会喜欢它，因为 DOM 节点严格来说没有任何“HTML”内容。

@amnotiam，同意。我的文字已更新，感谢您的澄清。 =)

【参考方案2】：

一些HTML元素有一个属性"value"，比如<input/>一些其他没有。

如果你想修改它们，你可以使用 DOM 属性（与Javascript 一起使用）innerHTML（如果有的话）。该属性表示一个元素的内容，因此它可以用于接受嵌套其他元素的元素，例如<div/>，

【参考方案3】：

HTML 中的许多元素都可以有一个 ID，因此 value 的定义将随每个元素而变化。

value 本质上就是该元素所理解的值。例如，<input type=text> 会给你里面的文字。

innerHTML 将是里面的 HTML 代码。例如，<TR> 将拥有其子 TD，以及其中的任何其他内容。

value 和 innerHTML（通常）可以被写入，也可以被读取。

【参考方案4】：

这与某些标签如何根据其属性工作有关，而其他标签如何根据开始和结束标签之间的文本工作。

.value 检索为标记的value 属性设置的任何值。 .innerHTML 检索开始和结束标记之间的任何内容。

例如，如果 HTML 标记是<input type="text" value="Enter name here" id="user_name" /> 你使用了 JavaScriptvar name = document.getElementById('user_name').value 将声明一个变量name 并为其赋值“在此处输入名称”（假设用户没有更改它）。另一方面，如果你有 HTML 像<div id="abc">blah blah</div> 那么你会使用var text = document.getElementById('abc') 这会将变量text 设置为“blah blah”。

【参考方案5】：

document.getElementByid('test').value

用于在文本字段中给出值。喜欢

<input type="text" id="test" name="test">

现在它在这个文本字段中赋予了价值。

虽然document.getElementByid('test').innerHTML 用于在指定区域给出值。喜欢

<div id="test">
</div>

现在它打印 div 区域内的值。