<p>应优先用 element.value 读表单实时值，因 getAttribute('value') 仅返回初始 HTML 值；data- 属性首选 dataset（自动连字符转驼峰），大写字母名如 data-userId 需回退 getAttribute；取文本推荐 textContent，避免 innerHTML 引发 XSS。</p>
用 getAttribute() 拿自定义或标准属性值
标准 HTML 属性（如 id、class、src）和自定义属性（如 data-id、data-status）都该用这个方法。它不依赖属性是否在 DOM 中“生效”，只读取原始 HTML 字符串值。
- 对
class，getAttribute('class')返回空格分隔的字符串；但推荐改用element.className或element.classList更安全 -
getAttribute('value')和input.value可能不同：前者是初始 HTML 值，后者是当前用户输入后的实时值 - 获取
data-属性时，优先用dataset（见下一条），但若属性名含大写字母（如data-userId），dataset.userid会失效，此时仍得靠getAttribute('data-userId')
用 dataset 读写 data- 属性更简洁
dataset 是专为 data- 属性设计的映射对象，自动处理连字符转驼峰规则，比反复调用 getAttribute 更直观。
const el = document.querySelector('div[data-user-id="123"]');
console.log(el.dataset.userId); // "123"（注意：data-user-id → userId）
el.dataset.status = 'active'; // 自动写入 data-status="active"
- 仅支持
data-开头的属性，其他属性（如aria-label）不能用 - 属性名中连字符（
-）会被转成驼峰，data-api-key→dataset.apiKey - 写入时值始终转为字符串，
dataset.count = 42实际存的是"42"
取文本内容别混用 innerText、textContent 和 innerHTML
三者行为差异明显，选错会导致 XSS 风险、样式影响或隐藏内容丢失。
-
innerText：受 CSS 影响（如display: none的内容不计入），会触发重排，返回“渲染后可见”的纯文本 -
textContent：返回所有子节点文本内容（包括script、style内容），不触发重排，性能更好，且保留空白符 -
innerHTML：返回 HTML 字符串，**直接插入到页面可能执行脚本**，除非你明确需要解析 HTML，否则避免用它取内容
const el = document.querySelector('p');
console.log(el.textContent); // 安全取文本，推荐用于数据提取
console.log(el.innerHTML); // 有风险，仅当真要序列化结构时用
取表单控件值统一用 .value，别用 getAttribute('value')
对于 <input>、<textarea>、<select>，用户交互后 DOM 属性（attribute）不会自动更新，但 JS 属性（property）会。所以必须用 .value 读当前值。
立即学习“前端免费学习笔记（深入）”；
-
<input value="init">初始时getAttribute('value')和.value相同；用户输入后，.value变，getAttribute('value')不变 -
<select multiple>多选时，.value只返回第一个选中项，需遍历options或用selectedOptions -
<input type="checkbox">应检查.checked，不是.value
取值这事看着简单，但属性（attribute）和属性（property）的边界、CSS 对文本的影响、data-* 的命名转换，这几个点一不留神就掉坑里。尤其在表单处理和动态渲染场景下，混用 getAttribute 和 .value 是最常被忽略的根源问题。
