HTML中的attribute属性和JavaScript中的property属性的详解以及区别

一直没有搞懂attribute和property的区别,弄了个例子,总结了一下。

一、基本概念区别
attribute:是HTML标签上的某个属性,如id、class、value等以及自定义属性,它的值只能是字符串,关于这个属性一共有三个相关的方法,setAttribute、getAttribute、removeAttribute;
注意:在使用setAttribute的时候,该函数一定接收两个参数,setAttribute(attributeName,value),无论value的值是什么类型都会编译为字符串类型。在html标签中添加属性,本质上是跟在标签里面写属性时一样的,所以属性值最终都会编译为字符串类型。
property:是js获取的DOM对象上的属性值,比如a,你可以将它看作为一个基本的js对象。这个节点包括很多property,比如value,className以及一些方法onclik等方法。如图:
这里写图片描述

从上图中我们可以看出,一个js对象有很多property,该集合名字为properties,properties里面有其他property以及attributies,attributies里面有很多attribute。

而常用的attribute,id、class、name等一般都会作为property附加到js对象上,可以和property一样取值、赋值。
二、差异
1、value属性
我们先来测试一遍
html

 <input type='text' name="testName" class="testClass" cc='111' id='testInpt' value='123' />

当我们输出的结果是这样的
这里写图片描述
浏览器渲染是这样的
这里写图片描述

没有错对不对,但是
当我在input输入框中输入值的时候
这里写图片描述

我再接着刚刚利用console.log输出
这里写图片描述

发现,只有property属性的value值是输入的值,attribute属性的value值依旧没有变,并且当我使用age.value=’45’的时候,再次获取attribute的值也并没有发送变化。那么,我改变attribute的值呢?property会不会改变呢?答案是不会,测试结果如下:
这里写图片描述

总个小结:attribute的value值只在初始化的时候跟property一样,使用getAttribute获取的值是初始化时候的值,如果没有设置则是”,除非使用setAttribute方法手动去改变,但是这个改变也不会影响property的值;
property的value值是input实时输入的值,该值的改变同样也不影响attribute。

三、name.id,class等属性
html

<input type='text' name="testName" class="testClass" cc='111' id='testInpt' value='123' />

输出结果
这里写图片描述

从上面可以看出,attribute和property的值都一样,那我们去改变呢,
使用setAattribute:
这里写图片描述

发现,当使用setAttribute去改变它的属性值时,再去获取property获取相对于的,也会发生改变,那么我们再来测试,当使用property去改变值,那么attribute所对应的值会不会改变
(注:可能在js里面class是保留字,所以使用property去获取class值时,使用的是className)

这里写图片描述

这里写图片描述

这里写图片描述

在更改id的时候自所以或报错,就说明id已经改了,再使用原来的id获取不到该节点了。

总个小结:对于class、id、name、等属性,无论哪一方面发生改变,都会互相影响。

四、对于新增加的属性
当property增加新属性
这里写图片描述

当attribute增加新属性
这里写图片描述

总个小结:对于新增的属性,都不会影响到其他一方。

五、hidden、disabled等属性

这里写图片描述

总个小结:1、attribute的hidden属性会影响property属性的hidden;
2、只要attribute的hidden不为null(当在html标签中写hidden 或者 hidden=xxx,property最终都会编译为true);
3、当使用removeAttribute函数移除hidden的时候,attribute才为null,input才会显示;
4、当property的hidden设为false的时候,attribute也会为null

**

注:当在代码里面添加hidden属性跟使用testInpt.hidden=true时一样的效果。
但是attribute属性,只有一个属性名hidden,是没有值的,所以在输出的时候为空,
在更改attribute属性值的时候并没有影响property属性的改变,但是移除attribute的hidden时,则将property的hidden设为了false,即hidden属性的默认值**

总结: 1、property和attributies都是properties的子集,而每个attribute是attributies的子集; 2、attribute可以理解为特性,可以自定义,直接在html标签上添加的和使用setAttribute添加的情况一致,即html标签添加的都是attribute属性, property则是使用xx.属性进行更改,通常来讲,更改互相影响(value除外) 3、当添加新的非默认属性时,是不互通的; 4、一些特殊属性,则需要特殊对待。

猜你喜欢

转载自blog.csdn.net/zhy13087344578/article/details/79036967