网络日志

JS---attribute和property的区别

参考地址《JS中attribute和property的区别

总述

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

  • attribute是HTML标签上的特性,它的值只能够是字符串。
  • property是DOM中的属性,是javascript里的对象。

介绍

attribute是dom节点自带的属性,例如html标签中常用的id、title、name、class等。

property是这个dom节点做为DOM对象所带的属性,比如firstChild、className等。

举例来说,对于下面的代码:

<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却没有出现。

这是由于,每一个dom对象都会有它默认的基本attribute(比如标签中的id、class、title),在创建的时候,它也只会创建这些基本attribute,对于自定义attribute(比如标签中的title1),是不会放到dom对象中的。

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

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

由此,可以得出结论:

所有在标签中定义的基本attribute,都可以在property中找到。所有在标签中定义的attribute,都可以在名为attributesproperty中找到

取值和赋值

attribute的取值和赋值

getAttribute()进行取值

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

任何attribute都可通过此方法进行取值,无论是基本attribute还是自定义attribute

setAttribute()进行赋值

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

任何attribute都可通过此方法进行赋值,如果是基本attribute,还会更新关联的property值。

使用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只能赋字符串类型的值。

两者的关联关系

做个有趣的实验,比如有下面这样的代码:

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

1. 修改id

通过attribute修改

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

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

    obj_input.setAttribute('id', 'bbb')

    console.log(obj_input.id) // 输出 -> bbb 
    console.log(obj_input.getAttribute('id')) // 输出 -> bbb 
</script>

通过property修改

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

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

    obj_input.id = 'bbb'

    console.log(obj_input.id) // 输出 -> bbb 
    console.log(obj_input.getAttribute('id')) // 输出 -> bbb 
</script>

结论:修改id时,两者会同步。

2. 修改type

通过attribute修改

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

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

    obj_input.setAttribute('type', 'checkbox')

    console.log(obj_input.type) // 输出 -> checkbox 
    console.log(obj_input.getAttribute('type')) // 输出 -> checkbox 
</script>

通过property修改

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

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

    obj_input.type = 'checkbox'

    console.log(obj_input.type) // 输出 -> checkbox 
    console.log(obj_input.getAttribute('type')) // 输出 -> checkbox 
</script>

结论:修改type时,两者会同步。

3. 修改class

通过attribute修改

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

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

    obj_input.setAttribute('class', 'blue')

    console.log(obj_input.className) // 输出 -> blue 
    console.log(obj_input.getAttribute('class')) // 输出 -> blue 
</script>

通过property修改

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

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

    obj_input.className = 'blue'

    console.log(obj_input.className) // 输出 -> blue 
    console.log(obj_input.getAttribute('class')) // 输出 -> blue 
</script>

结论:修改class时,两者会同步。

4. 关键看这块儿,修改value

通过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>

结论:修改value时,两者不会同步。通过attribute方式进行赋值时,数据会同步到property,但是通过property方式进行赋值时,数据没有同步到attribute

关联的结论

通过attribute方式进行赋值时,数据一定会同步到property,但是通过property方式进行赋值时,数据不一定会同步到attribute

---完---