# JS & DOM
##### Steve Jian
---
## 前端三巨頭
----
### HTML5
網站的基石
定義網頁的內容
``` HTML
<html>
<head>
<title>HTML Example</title>
</head>
<body>
<button>Hello</button>
</body>
</html>
```
----
### CSS
將HTML中的元素（element）
套用不同的頁面樣式（style）
``` CSS
button {
color: blue;
}
```
----
### JavaScript
使網頁產生互動
``` javascript
window.alert('Hi')
```
[Demo](https://codepen.io/steve5631/pen/rNNgXOX)
---
## JavaScript讓
## 開發者與瀏覽器打交道?
----
嚴格來說JavaScript並沒有提供網頁的操作方法
網頁的操作方法都是由 JS 的執行平台，也就是「瀏覽器」提供的
----
### 瀏覽器上的 JavaScript 實際上包含了
* JavaScript 核心 (以 ECMAScript 標準為基礎)
* BOM (Browser Object Model)
* DOM (Document Object Model)
----
前端開發者就是透過 JavaScript 去呼叫 BOM 與 DOM 提供的 API，進一步透過它們去控制瀏覽器的行為與網頁的內容
----
---
## BOM (Browser Object Model)
## 瀏覽器物件模型
----
瀏覽器所有功能的核心，與網頁的內容無關
其核心是 window 物件
----
瀏覽器裡的 window 物件扮演著兩種角色
* ECMAScript 標準裡的「全域物件」
(Global Object)
* JavaScript 用來與瀏覽器溝通的窗口
----
設定全域變數
``` javascript
var a = 10;
console.log( window.a ); // 10
```
----
BOM API Demo
``` javascript
window.alert("message"); //顯示一個對話框
window.history.back(); // 等同于点击浏览器的上一頁
```
----
除了```alert()```之外瀏覽器還有提供很多BOM API
可以參考[MDN Window](https://developer.mozilla.org/zh-CN/docs/Web/API/Window)
---
### DOM (Document Object Model)
## 文件物件模型
----
將 HTML 文件以樹狀的結構來表示的模型，而組合起來的樹狀圖，我們稱之為「DOM Tree」
----
當一個網頁被載入到瀏覽器時，瀏覽器會先分析這個 HTML 檔案，然後會依照這份 HTML 的內容解析成「DOM」
----
``` html
<html>
<head>
<title>一個簡單的網頁</title>
</head>
<body>
<h1>這是標題</h1>
<p>這是一個<i>簡單</i>的網頁</p>
</body>
</html>
```
----
---
複習一下GitHub把等等要用的範例clone下來
[傳送門](https://github.com/steve5631/EX.code)
----
取得節點
``` javascript
// 根據傳入的值，找到 DOM 中 id 為 'xxx' 的元素。
document.getElementById('xxx');
// 針對給定的 tag 名稱，回傳所有符合條件的 NodeList 物件
document.getElementsByTagName('xxx');
// 針對給定的 class 名稱，回傳所有符合條件的 NodeList 物件。
document.getElementsByClassName('xxx');
//針對給定的 Selector 條件，回傳第一個 或 所有符合條件的 NodeList
document.querySelector('xxx');
```
----
DOM 節點的類型
* ELEMENT_NODE (1)
HTML 元素的 Element 節點
* TEXT_NODE (3)
實際文字節點，包括了換行與空格
* COMMENT_NODE (8)
註解節點
* DOCUMENT_NODE (9)
根節點 (Document)
----
可以用.nodeType查看節點類型
---
### 子節點
DOM 節點有分層的概念
每個節點物件都有 childNodes 屬性
回傳所有子節點的NodeList 物件
----
----
### 父節點
parentNode 屬性可以用來取得父元素
---
### 新增節點
``` javascript
//建立一個元素節點
document.createElement('tagName');
//建立一個文字節點
document.createTextNode('Text');
```
建立新的節點後，這時候我們在瀏覽器上還看不到它，需將新元素加入至指定的位置之後才會顯示。
----
appendChild(newNode)
可以將指定的 childNode 節點，加入到 Node 父容器節點的末端
``` javascript
// 取得容器
var myList = document.querySelector('.container')
// 建立新的 <li> 元素
var newList = document.createElement('li');
// 建立 textNode 文字節點
var textNode = document.createTextNode("Hello world!");
// 透過 appendChild 將 textNode 加入至 newList
newList.appendChild(textNode);
// 透過 appendChild 將 newList 加入至 myList
myList.appendChild(newList);
```
----
----
insertBefore(newNode, refNode) 方法，則是將新節點 newNode 插入至指定的 refNode 節點的前面
``` javascript
// 取得容器
var myList = document.querySelector('.container')
// 取得 "<li>Item 02</li>" 的元素
var refNode = myList.childNodes[2];
// 建立 li 元素節點
var newNode = document.createElement('li');
// 建立 textNode 文字節點
var textNode = document.createTextNode("Hello world!");
newNode.appendChild(textNode);
// 將新節點 newNode 插入 refNode 的前方
myList.insertBefore(newNode, refNode);
```
----
----
replaceChild(newChildNode, oldChildNode) 方法，則是將原本的 oldChildNode 替換成指定的 newChildNode
```javascript
// 取得容器
var myList = document.querySelector('body')
// 選擇被取代的節點
var oldNode = document.querySelectorAll('h1')[0];
// 建立 h1 元素節點
var newNode = document.createElement('h1');
// 建立 textNode 文字節點
var textNode = document.createTextNode("Hello world!");
newNode.appendChild(textNode);
// 將原有的 oldNode 替換成新節點 newNode
myList.replaceChild(newNode, oldNode);
```
----
---
事件的註冊綁定
對 HTML 元素來說，只要支援某個「事件」的觸發，就可以透過 on+事件名 的屬性來註冊事件：
``` html
<button id="btn" onclick="console.log('HI');">Click</button><button id="btn" onclick="console.log('HI');">Click</button>
```
----
上面範例，透過 onclick 屬性
我們就可以在```<button>```元素上面註冊 click 事件
換句話說，當我按下這個```<button>```元素時
就會執行```console.log('HI');```的程式碼。
---
練習時間~
請參考DOM.html的原始碼
新增一個按鈕使計數器遞減
---
# *fin*
{"metaMigratedAt":"2023-06-15T01:58:02.462Z","metaMigratedFrom":"YAML","title":"JS & DOM","breaks":true,"slideOptions":"{\"transition\":\"slide\"}","contributors":"[{\"id\":\"d182e945-f719-41cd-8488-cb93bdb49c93\",\"add\":5619,\"del\":975}]"}