Element.getAttribute()是作什么用的呢？使用场景在哪里呢？

最新推荐文章于 2026-06-20 13:22:40 发布

原创最新推荐文章于 2026-06-20 13:22:40 发布 · 2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

不许偷代码哦，一键三连以后我的代码就是你的代码！！！

标签

#js原生 #js #前端

js 同时被 2 个专栏收录

60 篇文章

订阅专栏

js原生

24 篇文章

订阅专栏

这篇文章介绍了JavaScript中getAttribute方法的使用，通过示例展示了如何获取HTML元素的自定义属性值。文章强调了document.getElementById与document.getAttribute的配合使用，以及在处理自定义属性时为何推荐使用getAttribute。还提供了一个实际例子，演示了如何获取并显示超链接的target属性。

概要

getAttribute() 返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 “”

语法

let attribute = element.getAttribute(attributeName);

上面：

attribute 是一个包含 attributeName 属性值的字符串。
attributeName 是你想要获取的属性值的属性名称。

例子

<div id="div1" align='我就是我,不一样的烟火'>我是一个小盒子</div>

let div1 = document.getElementById("div1"); 　// 获取到div1的dom元素
let align = div1.getAttribute("align");      // 获取到dom元素中的align属性

alert(align);

效果图

在这里插入图片描述

使用场景

document.getElementById获取的是dom对象，document.getAttribute获取的是dom属性。
一般二者配合使用，document.getElementById获取dom对象，document.getElementById.getAttribut获取选中dom的属性
自定义属性建议用getAttribute，dom对象默认有的属性，如id之类的可以直接dom.id获取，否则需要用getAttribute，要不标准浏览器直接dom.xxx获取不到属性。

举例说明

<body>
读取 <a href="JavaScript:;" target="我就是一个参数" id='a'>Attr 对象</a>.
<p id="demo">单击按钮以显示上述链接的目标属性的值</p>    <--会被替换为我就是一个参数-->
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
    var a=document.getElementById("a");
    document.getElementById("demo").innerHTML=a.getAttribute("target");
}
</script>
</body>