一直沒(méi)有搞懂a(chǎn)ttribute和property的區(qū)別，弄了個(gè)例子蜗元，總結(jié)了一下。

一系冗、基本概念區(qū)別

????????attribute：是HTML標(biāo)簽上的某個(gè)屬性奕扣，如id、class掌敬、value等以及自定義屬性惯豆，它的值只能是字符串，關(guān)于這個(gè)屬性一共有三個(gè)相關(guān)的方法奔害，setAttribute楷兽、getAttribute、removeAttribute华临；

????????注意：在使用setAttribute的時(shí)候芯杀，該函數(shù)一定接收兩個(gè)參數(shù)，setAttribute（attributeName,value）,無(wú)論value的值是什么類型都會(huì)編譯為字符串類型雅潭。在html標(biāo)簽中添加屬性揭厚，本質(zhì)上是跟在標(biāo)簽里面寫屬性時(shí)一樣的，所以屬性值最終都會(huì)編譯為字符串類型扶供。

????????property：是js獲取的DOM對(duì)象上的屬性值筛圆，比如a，你可以將它看作為一個(gè)基本的js對(duì)象椿浓。這個(gè)節(jié)點(diǎn)包括很多property太援，比如value，className以及一些方法onclik等方法扳碍。如圖：

說(shuō)明圖

????????從上圖中我們可以看出提岔，一個(gè)js對(duì)象有很多property，該集合名字為properties左腔，properties里面有其他property以及attributies唧垦，attributies里面有很多attribute。而常用的attribute液样，id振亮、class、name等一般都會(huì)作為property附加到j(luò)s對(duì)象上鞭莽，可以和property一樣取值坊秸、賦值。

二澎怒、差異

1褒搔、value屬性

我們先來(lái)測(cè)試一遍：html

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

輸出結(jié)果

????????瀏覽器渲染是這樣的

瀏覽器渲染

????????沒(méi)有錯(cuò)對(duì)不對(duì)，但是當(dāng)我在input輸入框中輸入值的時(shí)候

瀏覽器渲染

????????我再接著剛剛利用console.log輸出

輸出結(jié)果

????????發(fā)現(xiàn)，只有property屬性的value值是輸入的值星瘾，attribute屬性的value值依舊沒(méi)有變走孽，并且當(dāng)我使用age.value=’45’的時(shí)候，再次獲取attribute的值也并沒(méi)有發(fā)送變化琳状。那么磕瓷，我改變attribute的值呢？property會(huì)不會(huì)改變呢念逞？答案是不會(huì)困食，測(cè)試結(jié)果如下：

輸出結(jié)果

????????總個(gè)小結(jié)：attribute的value值只在初始化的時(shí)候跟property一樣，使用getAttribute獲取的值是初始化時(shí)候的值翎承，如果沒(méi)有設(shè)置則是”硕盹，除非使用setAttribute方法手動(dòng)去改變，但是這個(gè)改變也不會(huì)影響property的值叨咖；property的value值是input實(shí)時(shí)輸入的值瘩例，該值的改變同樣也不影響attribute。

三芒澜、name.id,class等屬性

????????html

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

????????輸出結(jié)果

輸出結(jié)果

????從上面可以看出仰剿，attribute和property的值都一樣，那我們?nèi)ジ淖兡爻栈蓿褂胹etAattribute：

輸出結(jié)果

????????發(fā)現(xiàn)南吮，當(dāng)使用setAttribute去改變它的屬性值時(shí)，再去獲取property獲取相對(duì)于的誊酌，也會(huì)發(fā)生改變部凑，那么我們?cè)賮?lái)測(cè)試，當(dāng)使用property去改變值碧浊，那么attribute所對(duì)應(yīng)的值會(huì)不會(huì)改變（注：可能在js里面class是保留字涂邀，所以使用property去獲取class值時(shí)，使用的是className）

輸出結(jié)果1

輸出結(jié)果2

輸出結(jié)果3

????????在更改id的時(shí)候自所以或報(bào)錯(cuò)箱锐，就說(shuō)明id已經(jīng)改了比勉，再使用原來(lái)的id獲取不到該節(jié)點(diǎn)了。

????????總個(gè)小結(jié)：對(duì)于class驹止、id浩聋、name、等屬性臊恋，無(wú)論哪一方面發(fā)生改變衣洁，都會(huì)互相影響。

四抖仅、對(duì)于新增加的屬性

????????當(dāng)property增加新屬性

輸出結(jié)果

????????當(dāng)attribute增加新屬性

輸出結(jié)果

????????總個(gè)小結(jié)：對(duì)于新增的屬性坊夫，都不會(huì)影響到其他一方砖第。

五、hidden环凿、disabled等屬性

輸出結(jié)果

總個(gè)小結(jié)：

????????1梧兼、attribute的hidden屬性會(huì)影響property屬性的hidden；

????????2拷邢、只要attribute的hidden不為null（當(dāng)在html標(biāo)簽中寫hidden 或者 hidden=xxx袱院，property最終都會(huì)編譯為true）;

????????3屎慢、當(dāng)使用removeAttribute函數(shù)移除hidden的時(shí)候瞭稼，attribute才為null，input才會(huì)顯示腻惠；

????????4环肘、當(dāng)property的hidden設(shè)為false的時(shí)候，attribute也會(huì)為null

注意：當(dāng)在代碼里面添加hidden屬性跟使用testInpt.hidden=true時(shí)一樣的效果集灌。但是attribute屬性悔雹，只有一個(gè)屬性名hidden，是沒(méi)有值的欣喧，所以在輸出的時(shí)候?yàn)榭针缌悖诟腶ttribute屬性值的時(shí)候并沒(méi)有影響property屬性的改變，但是移除attribute的hidden時(shí)唆阿，則將property的hidden設(shè)為了false,即hidden屬性的默認(rèn)值

總結(jié)：?

????????1益涧、property和attributies都是properties的子集，而每個(gè)attribute是attributies的子集驯鳖；

?????????2闲询、attribute可以理解為特性，可以自定義浅辙，直接在html標(biāo)簽上添加的和使用setAttribute添加的情況一致扭弧，即html標(biāo)簽添加的都是attribute屬性， property則是使用xx.屬性進(jìn)行更改记舆，通常來(lái)講鸽捻，更改互相影響（value除外）

?????????3、當(dāng)添加新的非默認(rèn)屬性時(shí)泽腮，是不互通的御蒲；?

????????4、一些特殊屬性盛正，則需要特殊對(duì)待删咱。

本文內(nèi)容轉(zhuǎn)載于：https://blog.csdn.net/zhy13087344578/article/details/79036967；

分類：HTML/CSS;