getattribute 是获取 html 元素指定属性原始字符串值的方法,返回 html 中实际写入的值而非计算后状态;对不存在属性返回 null,区分大小写;不适用于获取实时表单状态,data-* 属性推荐用 dataset。

getAttribute 是 JavaScript 中用于获取 HTML 元素**指定属性的字符串值**的方法,适用于自定义属性(如 data-id)、标准全局属性(如 id、class、title),以及部分 HTML 特性属性(如 href、src)。它返回的是属性在 HTML 标签中**实际写入的原始字符串**,而不是经过浏览器解析或计算后的值。
基本用法:先获取元素,再调用 getAttribute
必须先通过 document.querySelector 或类似方法拿到 DOM 元素,才能在其上调用 getAttribute:
- 语法:
element.getAttribute('attributeName') - 如果属性不存在,返回
null(不是undefined) - 属性名区分大小写,建议使用小写(HTML 属性本身不区分,但 DOM API 按规范处理)
获取标准属性 vs 获取 data-* 自定义属性
两者都可用 getAttribute,但注意语义和兼容性:
-
getAttribute('id')→ 返回"myBtn"(HTML 中写的值) -
getAttribute('class')→ 返回"btn primary"(注意是class,不是className) -
getAttribute('data-user-id')→ 返回"123"(连字符命名需原样传入) -
getAttribute('hidden')→ 若标签写的是<div hidden>,返回空字符串 <code>"";若没写,返回null注意:不要用 getAttribute 获取表单值或实时状态
对于
value、checked、disabled等反映**当前状态**的属性,getAttribute只读取初始 HTML 值,不反映用户操作或 JS 修改后的结果:-
<input value="hello">→getAttribute('value')始终返回"hello",即使用户已输入"world" - 要获取用户当前输入,请用
element.value - 要判断复选框是否勾选,请用
element.checked(布尔值),而非getAttribute('checked')
替代方案:dataset 获取 data-* 属性更方便
如果只处理
data-*属性,推荐用element.dataset(返回 DOMStringMap 对象),自动转换连字符为驼峰命名:<div data-user-id="123" data-page-url="https://a.com"></div>-
element.dataset.userId→"123" -
element.dataset.pageUrl→"https://a.com" - 但注意:
dataset不支持非data-开头的属性
-











