手拉手一起学JavaScript——Attribute和Property

chechebecomestrong
80 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

手拉手一起学JavaScript——HTMLCollection和NodeList主要是面向Element和Node，感兴趣的可以点击查看

问题

1、当以下代码运行时，

let node = document.createElement('div')
node.setAttribute('id','test')
console.log(node.id)

输出内容为：

test

当以下代码运行时，

let node = document.createElement('div')
node.setAttribute('attr','box')
console.log(node.attr)

输出内容为：

undefined

为什么会有这种差异？

2、如果存在一下这样一段html代码 代码片段

此时输出的是

输出

都是style，输出为何不同?

Attribute和Property

  • attribute和property一度都被翻译成属性，随着前端的不断发展，元素对象和HTML标签的界限越发清晰，Element元素继承自Node，HTMLElement继承自Element，attribute是面向HTML标签的，更多的会被翻译成特性，property是面向元素的，被翻译成属性，此处的属性就和Object的属性的定义是一致的，可以通过.来访问，在操作特性的时候，需要使用attributes，setAttribute，getAttribute和removeAttribute。
  • 那么Attribute到底是什么呢？在上面的例子中打印一下
let test = node.attributes
console.log("🚀 ~ file: style.html ~ line 25 ~ test", test)
  • 可以看到，返回的是一个对象，有顺序，键值对，每一个键值对对应的是一个特性
  • 关于日常使用时，会经常混用，混用的原因可以通过开发者工具来查看： - 此处可以查看property，可以看到id，class，title，align等attribute会自动的加到property中，在对这些attribute操作后，获取属性，此时是同步的，但是如果是自定义attribute，则不会同步到property。（PS：attribute中的class转到property后是className，因为class是ECMA的关键词）
  • 关于style
    • attribute的style，在html标签中体现为内联样式，而property的style返回的是css style对象，因此这也是为什么getAttribute('style')只能打印内联样式的内容，因为只有内联样式的style才能被当成是特性加到HTML上

总结

  • 虽然日常中常用的特性也是属性，会同步改变，因此可以混用，但是在对一些自定义特性/属性的时候，需要做到心中有数，需要是特性的时候，使用attribute，是属性的时候，使用property。尤其是在组件这个层面，特性和属性有清楚的界限，代码可读性会更好。
  • 今天也是有收获的一天。
avatar
文章
阅读
粉丝