getattribute('value') 总是返回 html 初始值，因它读取静态属性；而 element.value 是动态 dom 属性，实时反映用户输入，故获取最新值必须用后者。
直接读 element.value，不是 getAttribute('value') —— 后者只返回 HTML 里写的初始值，用户改了也拿不到新内容。
为什么 getAttribute('value') 总是拿不到最新输入？
因为 getAttribute('value') 读的是 HTML 字符串里的原始属性值，而表单控件的 value 属性是 DOM 属性，会随用户输入实时更新。两者完全独立。
-
<input type="text" value="abc">：页面加载后，getAttribute('value')始终返回"abc" - 用户改成
"xyz"后，input.value变成"xyz"，但getAttribute('value')还是"abc" - 对
<textarea></textarea>、<select></select>同理，value是动态属性，getAttribute不适用
select 多选时 value 为什么只返回一个值？
因为 select.value 的设计就是返回第一个选中项的 value 字符串，它不处理 multiple 场景。
- 单选下拉框：
select.value安全可用 - 多选下拉框（
multiple）：select.value不可靠，必须用select.selectedOptions - 正确写法：
Array.from(select.selectedOptions).map(opt => opt.value) - IE 不支持
selectedOptions，需回退到遍历select.options并检查opt.selected
按钮点击时怎么拿到它自己的 value？
别用循环索引硬绑，用事件函数里的 this 直接取值最稳。
- 错误写法：
buttons[i].onclick = () => console.log(buttons[0].value)—— 总是取第一个 - 正确写法：
button.addEventListener('click', function() { console.log(this.value); }) - 箭头函数里没有
this绑定，必须用function声明才能让this指向被点击的元素 - 如果用
querySelectorAll获取多个按钮，记得每个都单独绑定addEventListener，不要复用同一个监听器
真正容易被忽略的是：所有表单控件的 value 都是运行时属性，不是静态 HTML 属性；而 getAttribute 和 dataset 这类方法，只适合读配置类数据，比如 data-id 或初始状态标记。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
