Day 04 HTML/JavaScript Attribute vs Property

Attribute vs Property

  • attribute:属性在 HTML 会被称为 attribute，href is attribute of a。
  • property:属性在 JS 会被称为 property，id is property of a。

范例

<a href="#" id="777"></a>

a.id="777"

Attribute 及 Property 虽然在英文上是两个不同的词，但中文同样都翻译成属性。
究竟两者到底有甚麽差异呢?
在探讨这个问题前，先来看看甚麽是 DOM 吧。

DOM(Document Object Model，文件物件模型)

DOM 主要是用来把 HTML 文件的元素变成物件，存取後拿来 JS 里使用。

范例

<h1 id = "title">学会React<h1>
<p class = "text">年薪百万<p>

像是上面的范例在 JS 可以透过 document.querySelector 或是 document.getElementById 等方法抓取到 HTML 的元素拿到 JS 里操作。

只要是 DOM 里的物件都会有以下这些函式可以使用：
https://ithelp.ithome.com.tw/upload/images/20210916/20139241U6RJa5akRF.png
(如常见的 document.querySelector() 或是 EventTarget.addEventListener() 都是这边提供的)。

DOM Tree

类似生物分类表，用来分类元素，元素当中 html 在最上层，下层则有 head、body 等元素，依阶层慢慢分类下去。
https://ithelp.ithome.com.tw/upload/images/20210916/20139241JFZGyg2HtQ.png

Attribute and Property

现在回到 Attribute 及 Property。
当浏览器在读取页面时，他会解析 HTML 并产生 DOM 物件。
对於大部分的节点，HTML 的 Attribute 都会自动被转换成 DOM 物件的 Property。

范例：

<body id = "title">

会被转换成：

body.id="title"

HTML attributes

  • attributes 的值一定是字串。
  • 没有大小写的区分(id = ID)
    每个元素都有他们各自的标准 attributes，有些是通用的，有些是限定的。
    如果不是标准或是限定的 attributes，那就不会产生对应的 DOM properties。
    这时候就无法透过一般的方法去操作这个 attribute。
  • 非标准：就是乱写，如：hello、5xruby。
  • 通用的：在各元素上都可以添加，如：id、class。
  • 限定的：只能在特定元素上添加，如：type 可以添加在 input 元素内，但如果添加在 div 内就不会产生对应的 DOM properties。

DOM properties

操作 properties 跟操作 JS 的物件及函式是很像的：

  • 可以帮他们添加任何值。
  • 有大小写的区分(是 addEventListener，不是 addeventlistener)。

那要怎麽抓到那些不会产生对应的 DOM properties 的 attributes 呢?

  • 可以透过以下方法抓到：
    • Element.hasAttribute(name) – 确认是否有这个属性。
    • Element.getAttribute(name) – 抓到这个属性的值。
    • Element.setAttribute(name, value) – 设定这个属性的值。
    • Element.removeAttribute(name) – 移除这个属性。

假如我需要自订一个非标准的 attributes 该怎麽办?

这时候 data 属性就可以派上用场了，在 HTML 以 data- 开头的可以在 JS 里面用 dataset 拿到。

范例

<div id="user" data-id="777" data-user="kirito">帮我撑10秒</div>

在 JS 可以用 dataset property 拿到。

const Beater = document.querySelector("#user");
Beater.id === "user"
Beater.dataset.id === "777"
Beater.dataset.user === "kirito"

参考：
[1]MDN:DOM
[2]wiki:DOM Tree
[3]Web开发学习笔记11 — DOM、Attribute与Property的差异
[4]Attributes and properties
[5]HTMLElement.dataset


<<:  Day 4 基本型别 - part 1

>>:  day19 : redisDB keyDB on K8S (上)

HERE API Example - 显示 GeoJSON Data

GeoJSON 是一种基於 JSON 的地理空间数据交换格式，相关定义可参考 RFC 7946，一个...

【没钱买ps，PyQt自己写】Day 5 - 开始来设计我们的 controller.py，改以「程序角度」来说明如何建立 PyQt 的系统

看完这篇文章你会得到的成果图 今天我们要延伸昨天的概念，开始来讲解我们如何设计 controller...

Day 04 - 行前说明 — 谈谈元件化开发与开发流程

如昨天预告的一样，今天来介绍元件化开发的技术背景，它是什麽、为什麽重要，最後再讲一下元件的开发流程...

DAY27:实作专案之动机及方向

今天先跟大家说明在我的学习过程中做出的一个小小专题，这个专题在当初还有跟三个同学共同完成，那就先说明...

Day 11 | UnityAR世界建立 - ARFoundation/ARCore介绍

上一篇文章介绍了Unity AR(Android)的建置环境，本篇文章会简单介绍开发此款手游的主要A...