前端 -＞ Attribute和property的简单理解

原创 已于 2022-02-16 16:46:55 修改 · 770 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#前端 #javascript #html
于 2021-01-06 17:59:43 首次发布
本文探讨了HTML中的attribute（属性）与JavaScript中的property（属性）的不同。attribute主要存在于HTML元素中，如id、class和title，而property是JavaScript中对象的概念，用于描述对象的特性。当HTML元素在JavaScript中被操作时，attribute可以转化为对象的property，但property无法直接变为HTML的attribute。了解这两者的差异对于前端开发至关重要。

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看

Attribute:属性

  • 就简单理解为是Html中才会出现的东西
<div id="div1" class="divClass" title="divTitle" title1="divTitle1">

</div>
  • id,class,title,title1都是atribute
  • 对应的值就是对应的value值
  • 用getAttribute(‘id’)的时候就可以获取对应的value

property:属性

  • 就简单理解为是js等有对象的语言中的属性
 var id = div1.id;
  • 这样的=就是对象的意思,与HTML的不太一样,HTML没有对象的概念
  • 如果使用了var in1=document.getElementById("div1");
  • 就是把HTML的一个属性变成了对象,就可以使用property了

总结

  • 可以理解attribute的属性就是真的属性的意思,对应一个值
  • property可以说成是对象属性的意思
  • 两个都是属性,但是property是对象属性,要相互用呢,就要把attribute转换成对象的属性
  • property是不能变成HTML的attribute的

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看
JavaScript中遍历对象的property的3种方法介绍
12-09
在JavaScript中，可以用三种方法来遍历对象的property： 1.for/in。可以使用for/in语句遍历对象自身的property(Own Property)及其从原型对象处继承的property，只有enumerable的property才会被遍历到。 2.Object.keys()。可以将对象作为参数传入Object.keys()，Object.keys()语句将返回由所有property名称字符串所组成的数组。Object.keys()语句仅返回对象自身的(Own Property)且enumerable的property。该语句仅在ECMAScript 5标准中有效。 3
笔记 前端需要了解的attribute和property的区别
ygx_work的博客
05-24 1119
定义 Property：属性，所有的HTML元素都由HTMLElement类型表示，HTMLElement类型直接继承自Element并添加了一些属性，添加的这些属性分别对应于每个HTML元素都有下面的这5个标准特性: id,title,lang,dir,className。DOM节点是一个对象，因此，他可以和其他的JavaScript对象一样添加自定义的属性以及方法。property的值可以是任何的数据类型，对大小写敏感，自定义的property不会出现在html代码中，只存在js中。 Attribute
前端学习案例2-attribute
qq_41632427的博客
01-14 221
前端
html前端学习十三：attribute array
苦苦思索的吃瓜群众博客
12-23 362
attribute 属性 标签属性的修改 <img id="img" src="1.jpg" alt="1.jpg" width="2560" height="1600" /> </body> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>...
前端中的 Attribute & Property
weixin_33726943的博客
01-07 526
为了在翻译上显示出区别，Attribute一般被翻译为特性，Property被译为属性。 在使用上面，Angular已经表明态度 Template binding works with properties and events, not attributes. 模板绑定是通过 property 和事件来工作的，而不是 attrib...
基于JavaScript分析property 和 attribute，2024年最新新手学web前端开发
m0_60452293的博客
04-19 679
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！转换为string，因为所有attribute的值都是string。
HTML中的attribute属性和JavaScript中的property属性的详解以及区别
热门推荐
01-11 2万+
一直没有搞懂attribute和property的区别，弄了个例子，总结了一下。 一、基本概念区别 attribute：是HTML标签上的某个属性，如id、class、value等以及自定义属性，它的值只能是字符串，关于这个属性一共有三个相关的方法，setAttribute、getAttribute、removeAttribute； 注意：在使用setAttribute的时候，该函数一定接收
Attribute 和 Property 的区别
关灯吃面
10-12 297
Property 是挂在一个 DOM 节点下，可供 'domNode.某属性'、'domNode["某属性"]' 这种 js 原生getter 访问器，直接访问的属性的集合。可以通过 for in loop 枚举出来： 上文可以看出，默认一个 dom 上挂载了很多Property，这些值可能是你没有设置过的，上文的例子中，这个 input 的 DOM 结构是很简单的： <input id="input" value="123" /> 只有 value 和 id，额外挂载的属性..
DOM的attribute和property
demo1986的博客
09-03 255
Written on 2013/04/18 at 21:27 作者：NoahLu DOM的attribute和property 归档于Javascript笔记10 条评论 今天讲一个JS的小话题，就是DOM节点的attribute和property的区别，这个点看起来很小，其实背后别有洞天。如果面试一个前端，听他讲讲对这个问题的理解，基本能分辨是不是菜鸟。下面的...
attribute 和 property 的区别
javadaysdaysup的博客
01-01 617
一、问题由来 在 jquery1.6 版本增加了 prop() 方法，用于操作 property, 而之前都是通过 attr() 方法操作的, 一直不理解这其中的区别. 二 attribute 和 property 区别 attribute 指的是你在 html 页面中给元素标签设置的属性, 例如下面这个 input 标签中, id, name 就是 attribute. &amp;amp;amp;amp;amp;amp;lt;in...
面试官：property和attribute的区别
最新发布
粉丝们务必加入微信粉丝群
03-09 1039
在前端开发中，property（属性）和attribute（属性/特性）是两个不同的概念，尽管它们在 HTML 和 JavaScript 中经常被混用，但它们的本质区别如下：1. 定义Attribute（HTML 特性）是 HTML 标签上的原始值，用于初始化元素的状态。存在于 DOM 元素的 attribute 节点中，只能通过getAttribute()/setAttribute()...
前端学习心得笔记之三（JavaScript篇）
2301_81101014的博客
04-07 1575
JavaScript一种运行在客户端（浏览器）上的解释性弱语言，是前端的重中之重，在计算机刚刚兴起的那个时代，这个由十天仓促编成的语言发展到现在也是令人吹嘘。
Vue小知识点补充——Attribute、动态绑定、计算属性、事件处理、生命周期
m0_62861576的博客
06-28 1374
数据的绑定在class和style的绑定上非常常见，所以我们可以使用v-bind的方式来绑定HTML的attribute，也可以使用其他的方式，绑定的表达式的值可以是字符串、对象或者数组。我们知道，双大括号{{}}的写法，可以将数据解释为纯文本，但是是不能动态绑定HTML的attributes的，要想绑定attribute就需要用v-bind指令。文档里面默认介绍的是选项式API，使用了data选项来声明组件的响应式状态，它会返回一个对象的函数，此对象可以用this调用。中的方法绑定了永远指向组件实例的。
【前端学习 - HTML（7）property和attribute的区别是什么】
weixin_60364883的博客
01-29 1083
1. property和attribute的区别是什么 attribute是HTML标签上的特性，它的值只能够是字符串; property是DOM中的属性，是JavaScript里的对象; 简单的理解就是： Attribute就是DOM节点自带的属性，例如html中常用的id、class、title、align等； 而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。 技巧： Property可以联想一下原型，原型本质上就是对象 ...
Attribute和Property的区别
u013362969的博客
03-11 1万+
一：Attribute和Property的区别 1.含义区别 首先在定义上更准确的来说，Attribute和Property分别为特性和属性，作为区别。 其次，这样理解下来，我们知道Attribute就是DOM节点自带属性，例如我们在HTML中常用的id,class,src,title,alt等。而Property则是这个DOM元素作为对象，其附加的属性或者内容，例如childNodes，fir...
前端面试题5-attr是什么，用法呢？
weixin_48249606的博客
10-27 1148
attr是什么，用法？ 定义和用法 attr()方法设置或返回被选元素的属性值 根据属性值的不同，会有多种用法 返回属性值：返回被选元素的属性值 语法： $(selector).attr(attribute) 参数 描述 attribute 规定要获取其值的属性。 设置属性/值：设置被选元素的属性和值 $(selector).attr(attribute,value) 参数 描述 attribute 规定属性的名称。 value 规定属性的值。 使
property和attribute，以及获取设置属性
m0_53438035的博客
07-28 674
在这里插个眼，说实话，没太明白 区别和相同 一般的内联属性为property和attribute共有，但自定义属性（内联样式中）为attribute所有。 attribute中的class在property中叫做className（在取值和赋值时注意） 取值和赋值（设值）的区别： 3.1.attribute的取值和赋值:getAttribute(‘属性名’,‘属性值’)，setAttribute(‘属性名’,‘属性值’) 3.2.property的取值和赋值分别为:变量=对象.属性;对象.属性=属性值（不
vue的Property
鹤渺的星球
05-16 1820
vue的property，经常提到这个词，只知道是类似于data里的属性，其他的不太了解，于是去学习property是什么。这是学习vue中的一个细节的补充，继续学习其他的去啦！t=N3I4t=N3I4t=N3I4VUE2快速入门(六)---实例property(重点)http://t.csdn.cn/8MLlgvue中的attribute 和 property 是什么意思http://t.csdn.cn/2m14d。
在HTML里，attribute和property有什么区别？
Lee Chen的博客
09-16 960
总之，当你在JavaScript中与HTML元素交互时，通常更推荐使用Property，因为它们提供了更丰富、更动态的交互方式。但在某些情况下，特别是当你需要获取HTML源代码中的原始值时，使用Attribute可能更有意义。之间的区别是一个常见但容易混淆的概念。它们都与HTML元素有关，但它们在功能、用途和行为上有所不同。属性（Property）的行为是不同的。属性（Attribute）和。在上面的示例中，我们可以看到。
JavaScript对象的property属性详解
bin1813的博客
08-28 2109
这篇文章主要介绍了JavaScript对象的property属性,详细讲解了property的各种属性,需要的朋友可以参考下 JavaScript中对象的property有三个属性： 1.writable。该property是否可写。 2.enumerable。当使用for/in语句时，该property是否会被枚举。 3.configurable。该property的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值