如何取值html_获取HTML元素属性或内容的值的方法【详解】_技术教程

应优先用 element.value 读表单实时值，因 getAttribute('value') 仅返回初始 HTML 值；data- 属性首选 dataset（自动连字符转驼峰），大写字母名如 data-userId 需回退 getAttribute；取文本推荐 textContent，避免 innerHTML 引发 XSS。

用 `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')`

对于、、，用户交互后 DOM 属性（attribute）不会自动更新，但 JS 属性（property）会。所以必须用 .value 读当前值。

立即学习“前端免费学习笔记（深入）”；

初始时 getAttribute('value') 和 .value 相同；用户输入后，.value 变，getAttribute('value') 不变
多选时，.value 只返回第一个选中项，需遍历 options 或用 selectedOptions
应检查 .checked，不是 .value