JS-attribute和property的区别

总述

attribute 通常翻译为特性，property 通常翻译为属性，两者是不同的东西。

• attribute 是HTM元素上的特性，它的值只能够是字符串。
• property 是DOM中的属性，是javascript里的对象。

基础：attribute知识

attribute 的分类

• 标准的attribute：某些 attribute 属性是标准的，比如 id 、 class 、 href 、 title 、 value 等；
• 非标准的attribute：某些 attribute 属性是自定义的，比如 abc 、 age 、 height 等；

基础：property知识

举例来说，对于下面的代码：

<div id="aaa" title="张三" title1="hehe" class="zzz"></div>

<script>
    let obj_div = document.getElementById('aaa')

    console.log(obj)
</script>

部分截图：

可以看到 div 元素的 id 、 class (在property中显示为className，因为class是js的关键字)、 title 这些 attribute 都可以在 property 中找到，但是 title1 却没有出现。

那么，这个 title1 跑哪儿去了呢？仔细观察，可以看到有个 property ，名为attributes，展开：

可以看到 title1 就在这个 attributes 对象中。

由此，可以得出结论：

• 对于标准的attribute，会在DOM对象上创建与其对应的property属性。
• 对于非标准的attribute，会在DOM对象的名为 attributes 的 property 中找到。

区别：取值和赋值

attribute的取值和赋值

用 getAttribute() 进行取值

obj_div.getAttribute('id')
obj_div.getAttribute('title')
obj_div.getAttribute('class')
obj_div.getAttribute('title1')

任何 attribute 都可通过此方法进行取值，无论是标准的还是非标准的。

用 setAttribute() 进行赋值

obj_div.setAttribute('title', '李四')
obj_div.setAttribute('class', 'ttt')
obj_div.setAttribute('title1', 'hahahaha')

使用 setAttribute() 方法接收的这两个参数都必须是字符串类型。

property的取值和赋值

用 . 进行取值

const title = obj_div.title
const className = obj_div.className
const childNodes = obj_div.childNodes
const attributes = obj_div.attributes

用 . 进行赋值

obj_div.title = '李四'
obj_div.className = 'ttt'
obj_div.AAA = true
obj_div.BBB = [1, 2, 'HEHE']

对 property 可以赋任何类型的值，对 attribute 只能赋字符串类型的值。

区别：赋值时的相互影响

在大多数情况下，它们是相互作用的：

• 改变 property ，通过 attribute 获取的值会随着改变；
• 通过 attribute 操作修改， property 获取的值会随着改变；

但是，修改input的value时，两者不会同步：

• 通过 attribute 方式进行赋值时，数据会同步到 property ；
• 但是通过 property 方式进行赋值时，数据没有同步到 attribute ；

通过 attribute 修改，示例代码如下：

<input type="text" id="aaa" value="1" class="red">

<script>
    let obj_input = document.getElementById('aaa')

    obj_input.setAttribute('value', '2')

    console.log(obj_input.value) // 输出 -> 2 
    console.log(obj_input.getAttribute('value')) // 输出 -> 2 
</script>

通过 property 修改，示例代码如下：

<input type="text" id="aaa" value="1" class="red">

<script>
    let obj_input = document.getElementById('aaa')

    obj_input.value = 2

    console.log(obj_input.value) // 输出 -> 2 
    console.log(obj_input.getAttribute('value')) // 输出 -> 1 
</script>

区别：大小写

attribute是大小写不敏感的

<input type="button" onclick="alert(123)" value="点击">
<input type="button" ONCLICK="alert(123)" value="点击">
<input type="button" onCLICK="alert(123)" value="点击">

onclick、ONCLICK、onCLICK都可以正常运行，都是一样的，没有区别，但是attribute通常是小写的。

property是大小写敏感的

// 有效的代码
btn.onclick = function() {
  alert(222);
};

// 无效的代码
btn.onClick = function() {
  alert(222);
};

这个很好理解，这属于js的范畴，js本身就是大小写敏感的，所以onclick和onClick是两回事儿。