D23 - 走！去浏览器用 create & append 加餐

前言

恭喜 codepen 复活 ＼（＾∀＾）メ（＾∀＾）ノ
终於可以透过实作来学习如何选取元素、操作 node，一起来制作敲可爱 Cookie Generator！

角色图片取用来源：CleanPNG

制作饼乾生成器需要的知识点有：

• DOM 节点选取
• DOM node 建立
• DOM node 删除
• DOM node 修改

开始做饼乾！

饼乾生成器的 html 结构如下，按钮的功能是用来绑定点击时的事件，而今天主要的 JavaScript Node 操作在cookieBox 元素内。

<h1>Cookie Generator</h1>
<!-- 按钮区 -->
<section>
    <button id="add" onclick = "addCookie()">Add</button>
    <button id="remove" onclick = "removeCookie()">Remove</button>
    <button id="replace" onclick = "replaceCookie()">Replace</button>
    <button id="insert" onclick = "insertCookie()">Insert</button>
</section>
    <button id="clearAll" onclick = "clearAll()">ClearAll</button>
    
<!--  用来放饼乾的地方 -->
<div id="cookieBox"></div> 

创建加饼乾 document.createElement

设计想法：点击按钮 Add 时增加饼乾。

实作：

1. 增加饼乾的方法就是增加 cookieBox 下的子元素，因此要先选取到 cookieBox，使用 querySelector 选取。
2. 每个新生成的饼乾都是一个 div ，使用 document.createElement('div') 语法可以建立一个 div 元素。
3. 透过 creatElement 建立节点的方式，在浏览器上无法看见新建立的元素，须透过 appendChild 将元素放入指定生成的位置。
   希望将饼乾放在 cookieBox 内，因此透过 cookieBox.appendChild() 语法，生成的饼乾都会成为 cookieBox 的子节点。
4. 最後，绑定点击按钮时会执行 addCookie function ，就完成新增饼乾啦！

const cookieBox = document.querySelector('#cookieBox');
function addCookie() {
    let cookie = document.createElement('DIV');
    cookieBox.appendChild(cookie);
}

消除饼乾 document.removeElement

设计想法：点击 remove 按钮修除饼乾。

实作：

1. 消除的顺序是从 cookieBox 下的第一个子元素节点开始消除，透过 children 将 cookieBox 下的所有元素节点选起来，[0] 指定从第一个元素开始消除。

补充： childNodes 也可以选到子节点，但是是选到所有种类的子节点(text node...)，而 children 是只选到子元素节点。

2. 选取到要删除的第一个子元素节点後，使用 cookieBox.removeChild() 语法移除节点，removeChild 前放的是父节点，（） 内放的是计画移除的子节点，若括号内的子节点不属於该元素或是不存在 DOM 内，会跳出错误讯息。
3. 绑定点击按钮时会执行 removeCookie function ，点击消除饼乾，成功！

function removeCookie() {
    let deletedCookie = cookieBox.children[0];
    cookieBox.removeChild(deletedCookie);
}

插入 elmo document.insertBefore

设计想法：点击按钮 insert 时在饼乾间穿插加入 elmo。

实作：

1. 先创建 elmo 元素，一样使用document.createElement('img') 语法，这次建立成 img 元素。

2. img 元素要加上 src 属性引入 elmo 图片来源，使用 setAttribute，语法可以在元素上增加属性，setAttribute(name, value) 括号内第一个参数放 html 标签内的属性名称 - src，第二个放属性内容 - elmo 图片 url，记得加上引号！

3. elmo 放的位置必须有参照的饼乾位置，由於要间隔着饼乾放入，透过每次 index +2 的方式达到交错，一开始从 饼乾[0] 前放，再从 饼乾[2] 前放...，将 i 的初始值设为 -2

饼乾 [0] - 饼乾[1] - 饼乾[2]
elmo[0] - 饼乾[1] - 饼乾[2]
elmo[0] - 饼乾[1] - elmo[2] - 饼乾[3]
elmo[0] - 饼乾[1] - elmo[2] - 饼乾[3] - elmo[4]

在 function 外设置一个参数 i，每次点击时 i +=2

4. 插入元素的语法为 insertBefore(newNode, referenceNode)，第一个参数为新插入的元素 - elmo，第二个参数为参照的元素 - 饼乾。

5. 最後，绑定点击按钮时会执行 insertCookie function ，就完成点击时有穿插在饼乾间的 elmo 啦～

let i = -2;
function insertCookie() {
  let elmo = document.createElement('img');
  elmo.setAttribute('src','elmo 图片');
  let refCookie = cookieBox.children[(i += 2)];
  cookieBox.insertBefore(elmo, refCookie);
}

cookie monster 取代饼乾 document.replaceElement(newChildNode, oldChildNode)

设计想法：点击 replace 时将饼乾换成 Cookie Monster。

实作：

1. 先创建 cookie monster，一样使用 createElement 创建 img 元素。
2. 要取代的饼乾是 div 标签，使用 querySelector 选取 cookieBox 下的第一个 div 标签。
3. 取代元素的语法是 replaceChild(newChildNode, oldChildNode)，第一个参数放新元素 - cookie monster，第二个放被取代的元素 - 饼乾。
4. 绑定点击按钮时会执行 replaceCookie function ，饼乾会从第一个开始换成 cookie moster！

function replaceCookie() {
let cookieMonster = document.createElement('IMG');
cookieMonster.setAttribute('src','cookie monster 图片');
let refCookie = cookieBox.querySelector('div');
cookieBox.replaceChild(cookieMonster, refCookie);
}

全部消除 clearAll

设计想法：点击 clearAll 清掉所有元素。

实作：

1. 所有的饼乾、elmo、cookie moster 都是存在於 cookiecookieBox 的子元素，使用 cookieBox.innerHTML = '' 清空 CookieBox 下所有节点
2. 清空节点後也记得控制 index 值的变数 i 也设定要回到初始值 -2。
3. 完成！

function clearAll() {
        cookieBox.innerHTML = '';
        i = -2;
}

Reference:

008天重新认识 JavaScript
JavaScript 技术手册
MDN
CleanPNG - Elmo, cookie, cookie monster 图片来源
Codepen 实作连结

结语

透过实作的方式学习有趣多了，顺便复习 css，感谢神队友们的 support！