乐趣区

关于javascript:JSattribute和property的区别

jiezi

参考地址《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，都能够在名为attributes 的property中找到。

取值和赋值

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。

— 完 —

退出移动版