html5中value属性用于设置或获取表单元素当前值，行为因input、textarea、select等类型而异；contenteditable元素需模拟value，非表单元素推荐用data-value与dataset配合。
在html5中，value属性用于设置或获取表单元素的当前值，其行为因元素类型（如、
一、input元素的value属性操作
对于元素，value属性直接反映用户输入或脚本设置的内容，且受type属性影响显著。文本类输入框（如text、email、number）支持字符串赋值与读取；而button、hidden等类型则仅通过属性初始化值。
1、在HTML中静态设置value：
2、使用javaScript设置value：
document.getElementById(“nameInput”).value = “李四”;
立即学习“前端免费学习笔记（深入）”；
3、使用javascript获取当前value：
const currentValue = document.getElementById(“nameInput”).value;
4、对type=”number”元素，设置非数字值将导致value变为空字符串：
document.getElementById(“numInput”).value = “abc”; // 此时.value返回””
二、textarea元素的value属性操作
textarea的value属性不对应其innerHTML或textContent，而是独立维护的内部值，初始值由标签体内容决定，但后续所有修改均通过value属性同步。
1、HTML中定义初始内容：
2、脚本中读取时始终返回当前编辑值，而非原始HTML文本：
console.log(document.getElementById(“desc”).value); // 返回实时内容
3、设置value会覆盖全部内容，包括换行符：
document.getElementById(“desc”).value = “新内容n第二行”;
4、若需保留原始HTML结构并动态更新，必须显式设置value，不能依赖innerHTML赋值。
三、select元素的value属性操作
select元素的value属性返回当前选中option的value值，若无匹配则返回空字符串；设置value可自动选中对应option，即使该option不存在也不会报错。
1、HTML结构示例：
2、获取当前选中项的value：
const selectedValue = document.getElementById(“country”).value;
3、设置value触发选项自动切换：
document.getElementById(“country”).value = “us”;
4、当设置的value无对应option时，select显示为空白，selectedIndex变为-1。
四、contenteditable元素模拟value行为
HTML5允许任意元素启用contenteditable属性，此时元素无原生value属性，需通过textContent或innerText模拟取值逻辑，但必须注意HTML实体与换行符处理差异。
1、启用编辑：
2、模拟取值（推荐用textContent避免HTML解析）：
const simulatedValue = document.getElementById(“editor”).textContent;
3、模拟设值（清除子节点后插入文本节点）：
const el = document.getElementById(“editor”);
el.innerHTML = “”;
el.appendChild(document.createTextnode(“新文本”));
4、若需保留部分内联格式，应使用innerHTML并严格过滤危险标签，不可直接映射为value语义。
五、自定义data-value与dataset配合使用
当需要为非表单元素附加可读写的数据值，且不干扰渲染时，推荐使用data-value属性结合dataset API，该方式兼容HTML5标准且支持自动类型转换。
1、在HTML中声明：
计数器
2、通过dataset读取（自动转为字符串）：
const storedValue = document.getElementById(“counter”).dataset.value; // “42”
3、通过dataset写入（仅接受字符串）：
document.getElementById(“counter”).dataset.value = “100”;
4、若需数值运算，须手动parseInt或parseFloat：
let num = parseInt(document.getElementById(“counter”).dataset.value) || 0;