---
# System prepended metadata

title: 1-1 、 如何在瀏覽器上執行 JS ?
tags: [Lidemy心得, 2020九月第一周, FE102, HTML+CSS, 進度筆記]

---

# 1-1 、 如何在瀏覽器上執行 JS ?
###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/01
---

## 在哪裡執行 ? 
- Node.js 和瀏覽器是執行環境。  
例如在 HTML中夾帶 ``<script></script>`` ，存成 index.html 檔案:  

```
<!DOCTYPE HTML>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>瀏覽器上執行 JS</title>
  <style></style>
  <script>
          alert('Hello');
  </script>
</head>

<body>
    <div>
                    Hello ?
    </div>
  
</body>
</html>
```
- 會彈出視窗跟你 Say Hello ; ``<script></script>`` 標籤可以放任何地方，但有差別。  
- 不可能把 JS code 全部放在 HTML 內，因此會用 `<script src="./index.js"></script>` 指向(這邊是同個資料夾目錄下)，像是模組化。  
- 這切成兩檔案蠻常用的，模組化，比較好維護。  

---

同個資料夾底下的 index.js 檔案:  
```
alert("Hello !");
```

---

## 瀏覽器和 Node.js 跑 JS 的差別

- 跑 JS 時語法一樣，但不同執行環境可能支援度不同。  
- 像是 `require('something')` 模組化在瀏覽器上就不能用。  

---
參考資料:  
[Node.js 是什麼？跟JavaScript 有什麼關係｜ALPHA Camp Blog](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwi_7tGomNvrAhUOG6YKHa2lAaQQFjAAegQIARAB&url=https%3A%2F%2Ftw.alphacamp.co%2Fblog%2Fnode-js-and-javascript&usg=AOvVaw3kDtS8gadcXN5Qx3WKBFV-)  

[不只是瀏覽器！JavaScript 征服世界的第一步- Node ... - iT 邦幫忙](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwi_7tGomNvrAhUOG6YKHa2lAaQQFjABegQIAhAB&url=https%3A%2F%2Fithelp.ithome.com.tw%2Farticles%2F10191345&usg=AOvVaw3UkIZ9Hu_WOZbtXr2Vk06x)  

[前端基礎JavaScript篇：JavaScript 與瀏覽器的溝通| by Hugh's ...](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwi_7tGomNvrAhUOG6YKHa2lAaQQFjACegQIBBAB&url=https%3A%2F%2Fmedium.com%2F%40hugh_Program_learning_diary_Js%2F%25E5%2589%258D%25E7%25AB%25AF%25E5%259F%25BA%25E7%25A4%258E-javascript%25E7%25AF%2587-javascript-%25E8%2588%2587%25E7%2580%258F%25E8%25A6%25BD%25E5%2599%25A8%25E7%259A%2584%25E6%25BA%259D%25E9%2580%259A-e00ff05d0fdc&usg=AOvVaw1rkmPmg-njFvWqgc-zaVM6)  

[JavaScript 是什麼? - 學習該如何開發Web | MDN](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwi_7tGomNvrAhUOG6YKHa2lAaQQFjADegQIBRAB&url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-TW%2Fdocs%2FLearn%2FJavaScript%2FFirst_steps%2FWhat_is_JavaScript&usg=AOvVaw1daw9wLJ2287KJ07A2PtyX)  

---

# 1-2 、 DOM Slayer
###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/01
---

## 檔案物件模型( Document Object Model )
- 根據 https://www.w3.org/TR/dom41/ 將 HTML 內寫的 Document 轉換成 Obj 。  
- 是提供一個樹狀結構化表示法，例如 Document 是整個文件，底下有很多節點(標籤)。  
    - 每個節點有繼承關係，像是 `<html></html>` 底下有 ``<head></head>`` 和 ``<body></body>`` 。  
- 用 JS 去拿各個節點(標籤)元素，來對元素做修改，寫了 JS 後跟瀏覽器做溝通來改變視覺上的 UI 呈現。  
    ![](https://i.imgur.com/t9nTblC.png)  
    
- 瀏覽器提供了這個橋梁 ( DOM ) ， 跟 JS 去溝通、改變元素來達到效果。  

---
參考資料:  

[文件物件模型(DOM) - Web APIs | MDN](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwjJueXWmtvrAhVBL6YKHbI1AqwQFjAAegQIAxAB&url=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-TW%2Fdocs%2FWeb%2FAPI%2FDocument_Object_Model&usg=AOvVaw092UimTN6SSluvL2bX2hhE)  

[Day03-深入理解網頁架構：DOM - iT 邦幫忙::一起幫忙解決難題 ...](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwjJueXWmtvrAhVBL6YKHbI1AqwQFjABegQIARAB&url=https%3A%2F%2Fithelp.ithome.com.tw%2Farticles%2F10202689&usg=AOvVaw1qjbmD8kRF-TagjwdzvQCY)  

[W3C DOM 簡介 - OpenHome.cc](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwjJueXWmtvrAhVBL6YKHbI1AqwQFjACegQIBBAB&url=https%3A%2F%2Fopenhome.cc%2FGossip%2FJavaScript%2FW3CDOM.html&usg=AOvVaw1dTRe45A09dpf7OsF9OFF9)  

[什麼是DOM？ @ 學習日誌:: 痞客邦::](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwjJueXWmtvrAhVBL6YKHbI1AqwQFjADegQIAhAB&url=https%3A%2F%2Fchenmike.pixnet.net%2Fblog%2Fpost%2F25948952&usg=AOvVaw14ZUJBJBWCDaiZT5eg73-A)  

---

# 1-3 、 選個魔法元素來用
###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/01
---

## getElements

### `Document.getElementsByTagName()`

可參考 [`Document.getElementsByTagName()`](https://developer.mozilla.org/zh-TW/docs/Web/API/Document/getElementsByTagName "The documentation about this has not yet been written; please consider contributing!")  ; 這些 function 都放在瀏覽器提供的特殊物件 document 上。  

---

存成 index.html 檔案:  
```
<!DOCTYPE HTML>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>瀏覽器上執行 JS</title>
  <style></style>
  <script>
    const elements = document.getElementsByTagName('div')
	console.log(elements)
  </script>
</head>

<body>
    <div>
        Hello ?
    </div>
  
</body>
</html>
```

- 空陣列，怪怪 der ， 根本不知道 Body 內的東西，因此會放在 ``</body>`` 之上。  

---

### `Document.getElementsByClassName()`

__可參考 [`getElementsByClassName()` - MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Document/getElementsByClassName) 。__  

---
假設 html 檔案有這行:  
```
<div class='block'>
            Hello
</div>

<script>const elements = document.getElementsByClassName('block')
console.log(elements)</script>
```
- 可以抓到 ``class='block'`` 的元素。  
- HTMLCollection 像是特殊型態的陣列。  

---

### `Document.getElementById()`

__可參考 [`document.getElementById()` - MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Document/getElementById) 。__  

- 通常 id 元素只有一個，雖然跟 class 一樣可重複。  

---

假設 html 檔案有這行:  
```
<div id='block'>
            Hello
</div>

<script>const elements = document.getElementById('block')
console.log(elements)</script>
```
- 可以抓到 ``id='block'`` 的元素。  
- 直接印出來。  

---

### querySelector

__可參考 [`querySelector` - MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Document/querySelector") 。__ 

- querySelector : Selector 表示接的是 CSS 的選擇器。  

---

假設 html 檔案有這行:  
```
<div id='block'>
            Hello
</div>

<script>const elements = document.querySelector('#block')
console.log(elements)</script>
```

- 類似 CSS Selector 的選擇方式，例如: id 用 '#block' 、 class 用 '.block' 和 div 就直接用 'div' 。  
- 也可以抓到標籤內的下層標籤，例如: 想抓 ``<a></a>`` 就直接用 'div a' 或是 'div > a' 。  
- 這個會選到第一個符合的元素。

### querySelectorAll

__會選到所有的節點(標籤元素) 。__  

可參考 [`querySelectorAll()` -MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Document/querySelectorAll) 。  

---

# 1-4 、 用 JS 改變 CSS 的魔法 p.1 !
###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/01
---

## `element.style.()`

用 querySelector 並假設 html 檔案有這行，如要修改 background :  
```
<div id='block'>
            Hello
</div>

<script>const elements = document.querySelector('#block')
console.log(elements)</script>
element.style.background = 'red'
element.style.['padding-top'] = '10px'
```
- `element.style.['padding-top'] = '10px'` 可以換成 `element.style.paddingTop = '10px'` (Camel-Case) ， 但注意不能用這樣 `element.style.padding-top = '10px` 來寫。  
- 實作上不太會這樣改，會用 class 屬性分開。

---

# 1-5 、 用 JS 改變 CSS 的魔法 p.2 !
###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/01
---

存成 index.html 檔案，實際上是 `<script src="./index.js"></script>` 指向 .js 檔案:  

```
<!DOCTYPE HTML>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>瀏覽器上執行 JS</title>
  <style>
    .active {
	background: red;
  }
  </style>
  <script>
    const elements = document.getElementsByTagName('div')
	console.log(elements)
  </script>
</head>

<body>
    <div id='block' class='active'>
        Hello ?!
    </div>
    <script>
         const element = document.querySelector('#block')
    </script>
</body>
</html>
```


- Hello ?! 會是紅色。  
![](https://i.imgur.com/sV5ARwq.png)  
```
---
## `element.classList.add()`
如果在 html 內這樣改:  
```
<body>
    <div id='block'>
        Hello ?!
    </div>
   <script>
         const element = document.querySelector('#block')
         element.classList.add('active')
    </script>
</body>

- 會成功加上 active 。  

![](https://i.imgur.com/4vsNkeg.png) 
```
--- 

## element.classList.remove()

如果在 html 內這樣改:  
```
<body>
    <div id='block' class='main'>
        Hello ?!
    </div>
    <script>
      const element = document.querySelector('#block')
	  element.classList.add('active')
	  element.classList.remove('main')
    </script>
</body>
```
- 會把 class 屬性的 main 移除，加上 active 。  

---

## `element.classList.toggle()`

- 本來沒有的話會新增，有的話會移除。  
- 適合用在按鈕按下去會改變樣式，並且回復樣式。  
```
<body>
    <div id='block' class='main'>
        Hello ?!
    </div>
    <script>
      const element = document.querySelector('#block')
	  element.classList.add('active')
	  element.classList.remove('main')
  	  element.classList.toggle('main')
	  element.classList.toggle('main')
    </script>
</body>
```
- main 被秒新增然後又被秒移除了。  

---
參考資料:  
[Element.classList - Web APIs | MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Element/classList)  

---

# 1-6 、 用 JS 觀測薛丁格的貓
###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/01
---

## 改變內容

- innerText
- innerHTML
- outerHTML

__都可以拿來獲取某個元素的內容。__  

---

## innerText (常用來改變文字)
如果在 html 內這樣改:  
```
<body>
    <div id='block'>
        Hello ?!
        <a>Yolo~</a>
    </div>
    <script>
        const element = document.querySelector('#block')
		console.log(element.innerText)
    </script>
</body>
```
- 會在 Hello ?! 的後面加上 Yolo~ ; 會印出標籤內的文字。
    - 甚至可以改變文字:  
```
<body>
    <div id='block'>
        Hello ?!
        <a>Yolo~</a>
    </div>
    <script>
        const element = document.querySelector('#block')
		element.innerText = 'I am Link'
		console.log(element.innerText)
    </script>
</body>
```
- 會印出 I am Link ， 只會顯示文字，通常不會針對 id 只會針對底下標籤，如: ``<a></a>``。  

## innerHTML (常用)
如果在 html 內這樣改:  
```
<body>
    <div id='block'>
        Hello ?!
        <a>Yolo~</a>
    </div>
    <script>
        const element = document.querySelector('#block')
	console.log(element.innerHTML)
    </script>
</body>
```
- 會抓到 `Hello ?! <a>Yolo~</a>` 這串; 把標籤中的東西拿出來。  
- 如果用`document.querySelector('#block a')` 就會只抓到 ``<a>Yolo~</a>`` 。  

## outerHTML (很少改整段)
如果在 html 內這樣改:  
```
<body>
    <div id='block'>
        Hello ?!
        <a>Yolo~</a>
    </div>
    <script>
        const element = document.querySelector('#block')
       console.log(element.outerHTML)
    </script>
</body>
```
- outerHTML 會把整段標籤抓出來，如果在 id 會連 id 也抓。  
    - 如: ``<div id="block"> Hello ?! <a>Yolo~</a> </div>`` 。  

## outerHTML 可以改變元素
如果在 html 內這樣改:  
```
<body>
    <div id='block'>
        Hello ?!
        <a>Yolo~</a>
    </div>
    <script>
        const element = document.querySelector('#block')
		element.outerHTML = '<h1>Hello~!?</h1>'
		console.log(element.outerHTML)
    </script>
</body>
```
- outerHTML 會把整段元素都改成 `<h1></h1>` ， 連文字都改成 Hello~!? 。  

---
參考資料:  
[理解textContent、innerHTML、innerText、outerText、outerHTML、nodeValue使用場景和區別](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/535058/)  

---

# 1-7 、 用 JS 插入和刪除元素
###### tags: `FE102` `HTML+CSS` `2020九月第一周` `進度筆記` `Lidemy心得` 09/02
---
## `element.removeChild()`
如果在 html 內這樣改:  
```
<body>
    <div id='block'>
        Hello ?!
        <a>Yolo~</a>
    </div>
    <script>
        const element = document.querySelector('#block')
		element.removeChild(document.querySelector('a'))
    </script>
</body>
```
- 會只印出: Hello ?! 。  
- 要刪掉元素要知道上一層的 parent 是誰。  
- 如果 ``<body>`` 下面再放一個 ``<a>123</a>`` ， 會刪除不了，因為不可能刪除掉 body ?  
- 可以參考 [`Node.removeChild()` - MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Node/removeChild) 。  

---

## `element.removeChild()`
如果在 html 內這樣改:  
```
<body>
    <div id='block'>
        Hello ?!
        <a>Yolo~</a>
    </div>
    <script>
        const element = document.querySelector('#block')
		const item = document.createElement('div')
		item.innerText = '123'
		const item2 = document.createTextNode('456')
		element.appendChild(item)
		element.appendChild(item2)
    </script>
</body>
```

- `element.appendChild(item)` 會新增一個 ``<div></div>`` 標籤，和增加 123 的文字。  
- `element.appendChild(item2)` 會新增一個純文字 456 。  
- 可以參考 [`Node.appendChild()` - MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Node/appendChild) 。   

---
參考資料:
[Node - MDN](https://developer.mozilla.org/zh-TW/docs/Web/API/Node)  