JS中getAttribute()用法详解与实例

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《JavaScript中，getAttribute() 是一个用于获取元素指定属性值的方法。它属于 DOM（文档对象模型）操作的一部分，常用于获取 HTML 或 XML 元素的属性值。一、基本语法element.getAttribute(attributeName)element：表示一个 DOM 元素对象（如通过 document.getElementById() 获取的元素）。attributeName：要获取的属性名称，例如 "id"、"class"、"href" 等。二、使用示例假设 HTML 中有如下代码：

JavaScript的getAttribute方法用于获取HTML元素上指定属性的原始值。它返回字符串或null（当属性不存在时）。使用时需先获取DOM元素，如：1. const myImage = document.getElementById('myImage');；2. const imageSource = myImage.getAttribute('src');；3. 若属性不存在，如data-custom，会返回null。与直接访问属性不同，getAttribute返回HTML中写死的原始值，而.src等属性反映的是实时状态。处理返回null的情况应进行判断，如：if (dataValue !== null)，或提供默认值。对于data-*属性，dataset更方便，但getAttribute在非标准自定义属性或需要兼容旧浏览器时依然重要。

JavaScript的getAttribute方法就是用来获取HTML元素上指定属性的值。简单来说，它能帮你从DOM元素身上“读”出它某个属性里到底写了什么。使用起来也很直接，你只需要拿到那个DOM元素，然后调用它的getAttribute('属性名')就行。

解决方案

要使用getAttribute，你首先得有一个DOM元素。比如，你有一个，如果你想知道它的src属性是什么，你可以这样做：

const myImage = document.getElementById('myImage');
const imageSource = myImage.getAttribute('src'); // 结果会是 "image.jpg"
const altText = myImage.getAttribute('alt');     // 结果会是 "Description"
const nonExistentAttr = myImage.getAttribute('data-custom'); // 如果不存在，结果会是 null

它会返回一个字符串，代表了该属性在HTML中被定义时的原始值。如果指定的属性不存在，它就会返回null。我个人觉得它特别好用，因为它直接拿到了DOM上写死的那个值，而不是经过浏览器解析或脚本修改后的“实时”属性。这在某些场景下，比如你想获取一个元素的原始配置，或者检查一个属性是否存在时，非常关键。

getAttribute与直接访问属性（如.id或.className）有什么区别？

刚开始学的时候，我老是混淆这两者，觉得不都一样吗？但其实差别挺大的。直接访问DOM元素的属性，比如element.id、element.className、element.src等，这些是DOM对象上的JavaScript属性。它们通常反映的是元素的“当前”或“计算后”的状态，有时候会和HTML里写的不完全一样。

举个例子，对于布尔属性，比如<input type="checkbox" checked>：

• inputElement.getAttribute('checked')会返回字符串"checked"（因为HTML里就是这么写的）。
• inputElement.checked会返回布尔值true或false，它反映的是复选框的实际选中状态，即使你通过JavaScript改变了它的选中状态，inputElement.checked会立即更新，但getAttribute('checked')可能还是返回"checked"或null，除非你用setAttribute去改变了它。

再比如href属性，如果你HTML里写的是相对路径，getAttribute('href')会返回"page.html"，而anchorElement.href则会返回完整的绝对URL路径，比如"http://localhost/page.html"。

所以，如果你需要获取HTML中“原始”定义的属性值，getAttribute是你的首选。如果你需要获取元素当前的、经过浏览器解析或脚本处理后的“实时”状态，那么直接访问JavaScript属性会更合适。

如何处理getAttribute返回null的情况？

这是个很实际的问题，也是我踩过坑的地方。getAttribute在指定的属性不存在时，会返回null。如果你不加以判断，直接对null进行操作（比如调用null.length或者null.toLowerCase()），你的代码就会抛出错误。

最常见的处理方式就是在使用返回值之前，先检查它是否为null：

const myDiv = document.getElementById('myDiv');
const dataValue = myDiv.getAttribute('data-value');

if (dataValue !== null) {
  console.log("属性存在，值为：" + dataValue);
} else {
  console.log("属性不存在。");
}

// 或者，如果你想提供一个默认值
const effectiveValue = myDiv.getAttribute('data-another-value') || '默认值';
console.log("最终的值是：" + effectiveValue);

这种防御性编程习惯非常重要，能有效避免很多运行时错误。特别是在处理用户自定义的HTML或者来自后端的数据时，你永远不能假设某个属性就一定存在。我记得有一次，因为没做这个判断，整个页面都崩了，排查了半天才发现是一个不常用的元素缺少了某个data属性。

getAttribute在处理自定义属性或data-*属性时有什么特别之处？

getAttribute在处理自定义属性，尤其是HTML5引入的data-*属性时，显得非常灵活和强大。data-*属性是专门用来存储自定义数据在HTML元素上的，而不会影响布局或样式。

比如，你有一个这样的元素：

const productDiv = document.getElementById('product');
const productId = productDiv.getAttribute('data-id');     // "123"
const productPrice = productDiv.getAttribute('data-price'); // "99.99"

// 接着上面的例子
const productIdFromDataset = productDiv.dataset.id;     // "123"
const productPriceFromDataset = productDiv.dataset.price; // "99.99"

// 如果是 data-product-name="XYZ"
// const productName = productDiv.dataset.productName;