# 第五週課程重點筆記
###### tags: `JS 課程重點筆記` `2021` `JS直播班` `秋季班` `六角學院`

## :mag_right: DOM (Document Object Model)


### :one: Document 物件
網頁本身就是一個很大包的物件，裡面有各種屬性。

### :two: 選取 Document 物件內的標籤 ( 用 JS 選取 )
document.querySelector("h1")

### :three: 把 JS 傳送到畫面上
- .textContent：只會修正**文字節點(text)**，不會更動 element(元素標籤)
- .innterHTML：更動 html 標籤

----

## :mag_right: forEach ( 遍歷，陣列資料處理方法 )

### 陣列有幾筆資料，function 就跑幾次

- 基本結構：

let data = [10, 20, 30, 40]

data.forEach(function(value, index, array){
    console.log(value, index, array)
})

- function 跑完後，{ } **內部記憶體就會清空、歸零**。

let array = [2, 3, 5]

array.forEach(function(item){
    
    let total = 0;
    total += item;
    console.log(total) //2, 3, 5
    
})

- forEach 參數對應的資訊：

| | 參數對應的資訊 | 值 |
| --------------- | -------------------- |:----------------:|
| **value, item** | 陣列中個別的值 | 10, 20, 30, 40 |
| **index** | 這是陣列的第幾筆資料 | 0, 1, 2, 3 |
| **array** | 陣列的全貌 | [10, 20, 30, 40] |

## :mag_right: forEach 篩選資料
### 搭配 if 判斷式，可進行篩選資料的工作

### forEach 組新資料
- 透過 forEach 迴圈可以逐筆帶入資料
- forEach 將每一筆資料都過濾簡化，組成 item