JS30 笔记 Day01 JavaScript Drum Kit

以下为自我纪录的笔记，只记录自己比较不熟的观念。

思路:

按下键盘 > 找到元素 > 拨放声音

ontransitionend 事件

唯有css tansition 动画时才会触发
範例 >https://codepen.io/aliceyuwei/pen/zYMqgBW

HTML元素获取中的静态和动态

原生的JS获取元素节点通常返回的是单个element对象或一个元素集合，之所以叫集合，是因为它不是数组，但是和数组有类似的性质。
这种元素集合，有两种形式，一种是只包含元素的HTMLcollection元素收集器，另一种是包含文本节点的Nodelist节点列表。
HTMLcollection是动态的，即一旦文档结构发生改变，HTMLcollection就会立即更新。
nodelist一班情况下也是动态

使用 querySelector 返回的是静态的 nodelist
使用 getElementById / getElementByClassName 返回的则是动态的 nodelist

原始的元素:

console结果:

动态插入元素:

console结果:

HTML元素kbd

HTML 键盘输入元素 (kbd) 用于表示用户输入，它将产生一个行内元素，以浏览器的默认 monospace 字体显示。
範例:

Array.from()

Array.from() 方法会从类阵列（array-like）或是可迭代（iterable）物件建立一个新的 Array 实体。
範例:

Array.from('foo');// ["f", "o", "o"]