一、基本概念区别
-
attribute:是HTML标签上的某个属性,如id、class、value等以及自定义属性
它的值只能是字符串,关于这个属性一共有三个相关的方法,setAttribute、getAttribute、removeAttribute;
-
property:是js获取的DOM对象上的属性值,比如a,你可以将它看作为一个基本的js对象。
这个节点包括很多property,比如value,className以及一些方法onclik等方法。
从上图中我们可以看出,一个js对象有很多property,该集合名字为properties,properties里面有其他property以及attributies,attributies里面有很多attribute。所以attributes其实是属于property的一个子集。
简单理解,Attribute就是DOM节点自带的属性,HTML标签中定义的属性和值会保存该DOM对象的attributes属性里面;而Property是这个DOM元素作为对象其附加的内容,例如childNodes、firstChild等,且都是默认的基本属性,而在创建的时候,它只会创建这些基本属性,。
总结:
-
- property和attributies都是properties的子集,而每个attribute是attributies的子集;
-
- attribute可以理解为特性,可以自定义,直接在html标签上添加的和使用setAttribute添加的情况一致,即html标签添加的都是attribute属性, property则是使用xx.属性进行更改,通常来讲,更改互相影响(value除外)
-
- 当添加新的非默认属性时,是不互通的;
-
- 一些特殊属性,则需要特殊对待。
二、attribute和property的取值和赋值
1、attribute取值
《js高级程序设计》中提到,为了方便操作,建议大家用setAttribute()和getAttribute()来操作即可。
<div id="div1" class="divClass" title="divTitle" align="left" title1="divTitle1"></div>
var id = div1.getAttribute("id");
var className1 = div1.getAttribute("class");
var title = div1.getAttribute("title");
var title1 = div1.getAttribute("title1"); //自定义特性
复制代码
2、attribute赋值
div1.setAttribute('class', 'a');
div1.setAttribute('title', 'b');
div1.setAttribute('title1', 'c');
div1.setAttribute('title2', 'd');
复制代码
用setAttrbute()赋值,任何Attribute都可以,包括自定义的。而且,赋值的Attribute会立刻表现到DOM元素上。
如果是标准特性,也会更新它们关联的属性的值:
注意:在使用setAttribute的时候,该函数一定接收两个参数,setAttribute(attributeName,value),无论value的值是什么类型都会编译为字符串类型。在html标签中添加属性,本质上是跟在标签里面写属性时一样的,所以属性值最终都会编译为字符串类型。
3、property取值
属性取值很简单。取任何属性的只,用“.”就可以:
var id = div1.id;
var className = div1.className;
var childNodes = div1.childNodes;
var attrs = div1.attributes;
复制代码
此处再次强调:
- class特性在变成属性时,名字改成了“className”,因此div1.className和div1.getAttrbute('class')相同。
- 上面代码中的div1.attributes是取的attributes这一属性,取出来保存到attrs变量中,attrs就成了一个NamedNodeList类型的对象,里面存储了若干个Attr类型。
4、property赋值
赋值和基本的js对象属性赋值一样,用“.”即可:
div1.className = 'a';
div1.align = 'center';
div1.AAAAA = true;
div1.BBBBB = [1, 2, 3];
复制代码
对属性Property可以赋任何类型的值,而对特性Attribute只能赋值字符串!
更改property和attribute其中一个值,会出现什么结果
由此,可得出结论:
- property能够从attribute中得到同步;
- attribute也会同步property上的值;
- attribute和property之间的数据绑定是双向的;
- 更改property和attribute上的任意值,都会将更新反映到HTML页面中。
作者:月落梅影
链接:https://juejin.im/post/6844903966187192333
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。