为何使用document.getelementsbyname()能获取到值，但元素审查中value字段为空？

这种情况在前端开发里真的很常见，我来给你梳理几个核心原因：

• DOM属性（property）和HTML属性（attribute）的分离
  浏览器对DOM元素的value其实维护了两个“版本”：

  • 一个是HTML attribute：就是你写在HTML标签里的value=""，这是元素的初始值，审查元素时看到的就是它。
  • 另一个是DOM property：这是当前元素实际生效的值，控制台通过document.getElementsByName()获取到的就是这个。
    当你通过JS动态设置element.value = '新值'，或者用户手动输入内容时，只会更新DOM property，不会同步修改HTML attribute，所以审查里的value还是空，但控制台能拿到真实值。
    举个简单的例子：

  <input name="username" value="">
  

  然后在控制台执行：

  document.getElementsByName('username')[0].value = 'harshpareek';
  

  这时候审查元素里的value还是空字符串，但控制台获取到的就是harshpareek。

• 用户输入的内容不会更新HTML属性
  当用户在输入框、下拉选择框这类表单元素里输入或选择内容时，浏览器只会更新元素的DOM property来保存当前值，不会去修改HTML源码里的value属性。所以你审查元素时看到的始终是页面加载时的初始空值，但控制台能拿到用户输入的真实内容。

• 前端框架/自定义组件的“虚拟值”处理
  如果你用了React、Vue这类前端框架，或者一些UI库的自定义组件，它们往往会把表单值存在组件的内部状态中，而不是直接绑定到原生DOM的value属性上。甚至有些组件会用隐藏的<input>来存储实际提交的值，这时候你通过getElementsByName()拿到的是隐藏input的真实值，但审查可视化组件时，它的value属性自然是空的。

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