attribute和property的区别

最新推荐文章于 2025-04-06 11:45:33 发布

城楠_327

最新推荐文章于 2025-04-06 11:45:33 发布

阅读量2.4k

点赞数 3

分类专栏： HTML栏文章标签： dom javascript html

本文链接：https://blog.youkuaiyun.com/weixin_46647170/article/details/117369708

版权

attribute代表HTML标签的属性，property则是JS中DOM对象的属性。attributes是properties的子集，包含HTML标签上的属性，而properties包含更多DOM属性，如事件处理等。使用getAttribute()和setAttribute()操作attribute，property则通过“.”操作符赋值和取值。注意，class在property中为className。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于attribute和property的区别

attribute是HTML标签的属性
property是JS获取DOM对象上的属性值

<div id="div1" class="class1" title="title1" name1="name1"></div>

f12查看attribute和property

在开发者工具中可以看出attributes是properties的一个子集，他保存了html标签上的一些标签如id、class、title以及自定义的name1属性。
在这里插入图片描述

properties下包含很多DOM属性例如我们熟知的childNodes、children、firstChild和一些点击事件如onclick和onblur等属性。
在这里插入图片描述

当然一些基本的标签属性如id、class、title、value等也可以在properties中找到，但是自定义的属性如name1是找不到的，只能在attributes中找到。这是因为每一个DOM对象都会有它默认的基本属性，而创建的时候只会创建这些基本属性，我们在标签中自定义的属性是不会被放在DOM中的。

<div id="div1" class="class1" title="title1" name1="name1"></div>
    <script>
        let div1 = document.getElementById('div1')
        console.log(div1.id);
        console.log(div1.className);
        console.log(div1.title);
        console

最低0.47元/天解锁文章