HTML option元素textContent与value属性值为何存在不必要差异？

问题场景 #

假设有如下HTML代码：

<option>Clark, Theodore  S.</option>

注意：Theodore后包含两个连续空格。

实际测试发现：

• 调用textContent获取内容时，得到精确的原始文本：Clark, Theodore S.
• 获取value属性时，得到的却是合并空格后的结果：Clark, Theodore S.

疑问点 #

• 按直觉似乎应该是textContent返回修剪/合并后的内容，value返回精确值？
• 为何<input>元素的value不会被修剪，而<option>的value会被处理？
• value属性本应准确反映设置的实际值，为何会被修改？这是JavaScript的bug还是有意设计？

解答 #

这不是JavaScript的bug，是浏览器遵循HTML规范的有意设计，核心逻辑如下：

1. <option>的value自动生成规则
   当你没有给<option>显式设置value属性时，浏览器会自动用元素内部的文本内容填充value，但这个过程会严格按照HTML规范处理空白字符——将连续的多个空格、换行、制表符等空白合并为单个空格。这是为了生成标准化的、适合作为表单提交值的内容。

2. textContent的行为逻辑
   textContent的作用是返回节点包含的所有原始文本内容，不会对文本做任何格式化或空白合并处理，因此能完整保留原本的两个连续空格。

3. 与<input>元素的差异原因
   <input>的value属性直接对应开发者设置的内容或用户输入的原始数据，浏览器不会自动修改其空白字符——因为input的核心是承载用户的原始输入信息；而<option>的自动value生成是浏览器的标准化处理，目的是提供统一的表单提交值。

如果需要让<option>的value保留原始的两个空格，只需显式设置value属性即可：

<option value="Clark, Theodore  S.">Clark, Theodore  S.</option>

此时获取value就能得到与文本内容完全一致的带两个空格的结果。

内容的提问来源于stack exchange，提问作者Emberfire