# 第五堂：期中試煉

## 開課提醒
1. 錄影
2. [第四週週報](https://liberating-turtle-5a2.notion.site/EP4-4060878058e14309b7bdf3299b10dd95?pvs=4)
3. 有想要學習小卡的同學今天已寄出，這幾天請留意收信
4. 中場休息：分享加碼課資訊

## 今日上課知識點
1. DOM
2. forEach

---
## DOM 文件物件模型
提供 Document 轉換成 Object 的結構化表示法，讓 JS 可以直接存取到 HTML 元素、屬性、文字等等的內容

### 取 DOM 元素
1. getElementsByTagName → 使用 tag name 取元素
2. getElementsByClassName → 使用 class 取元素
3. getElementById → 使用 id 取元素
4. ✨**querySelector** → 使用 tag name / class / id 取元素
5. ✨**querySelectorAll** → 使用 tag name / class / id 取所有元素

### textContent
動態新增/修改/取得節點中的**文字內容**

document.querySelector("h1").textContent = "hello world";

### innerHTML
動態新增/修改/取得 **DOM 元素**

document.querySelector("h1").innerHTML = "<h2>新增標題</h2>";

**textContent 與 innerHTML 的差異？**

## forEach
用來遍歷陣列元素的方法

* 基本用法

[1,2,3,4,5].forEach(function(item){
    console.log(item);
});

// 1
// 2
// 3
// 4
// 5

* 語法參數講解

let data = [3,30,100];

data.forEach(function(item,index,ary){
    console.log(item,index,ary);
});

使用範例：

* forEach 陣列數字累加

let data = [3,30,100];
let total=0;

data.forEach(function(item){
    total+=item;
});

* forEach 物件裡面的數字累加

let data = [
  {
    num: 10
  },
  {
    num: 30
  },
  {
    num: 100
  }
];
let total = 0;

data.forEach(function(item){
  total+=item.num;
});

* forEach + innerHTML
* [範例ㄧ：innerHTML](https://codepen.io/hexschool/pen/wvoRboe?editors=1010)
* [範例二：字串累加、forEach](https://codepen.io/hexschool/pen/WNoLBjd?editors=1010)
* [範例三](https://codepen.io/hexschool/pen/GRNParj?editors=1010)
* 以[第五關主線任務](https://github.com/hexschool/js-training/blob/main/travelApi.json)為例、[CSS 現成模版](https://codepen.io/hexschool/pen/poNqmEL)
* forEach + if
* [男生共有幾位？](https://codepen.io/hexschool/pen/yLVGWpx?editors=1010)
* [國中人數共有幾位？](https://codepen.io/hexschool/pen/vYbXbMB?editors=0010)、[資料集](https://data.tainan.gov.tw/dataset/junior-number/resource/4f56ba22-0b13-4570-8be6-2d66483ffa5f)
* [高雄里長黨派各有幾位？](https://codepen.io/hexschool/pen/BaMLMez?editors=0010)、[資料集](https://cabu4.kcg.gov.tw/KcgRegion/OpenData/%E9%87%8C%E9%95%B7%E9%80%9A%E8%A8%8A%E9%8C%84.JSON)

---

## 本週任務
1. 主線任務
2. 小組任務
3. 週末任務：薪資資料接龍
請拿薪資資料集，出一個題目來接龍
資料:
* [2021 前端工程師薪資資料](https://raw.githubusercontent.com/hexschool/2021-ui-frontend-job/master/frontend_data.json?token=AAQWFQDSNRRXC6FBW7PDSETBOESVW)、[欄位介紹](https://github.com/hexschool/2021-ui-frontend-job)
* [前端問卷資源](https://docs.google.com/forms/d/e/1FAIpQLScJfMnHg27iDUG3aAecClJQMudzxiLpXsHfMXkhmDKTYKybcA/viewanalytics)