---
# System prepended metadata

title: JS 個人筆記

---

 # JS 個人筆記
:::warning
多行註釋 Alt + Shift + A
自動排版 Alt + Shift + F
刪除一行 Ctrl + Shift + K
:::
[TOC]
# JS 書寫方法
## **<font color="#D92D71">行內式</font>**
![](https://i.imgur.com/WK9k46i.png =580x)
![](https://i.imgur.com/n917wj9.png =580x)

## **<font color="#D92D71">內嵌式</font>**
![](https://i.imgur.com/1Orxo4I.png =200x)
![](https://i.imgur.com/KoRELbz.png =270x)

## **<font color="#D92D71">外部式</font>**
![](https://i.imgur.com/NdleKzZ.png =300x)
![](https://i.imgur.com/8LuUyLB.png =600x)

## 註釋
![](https://i.imgur.com/MDycqkL.png =550x)
## 輸出語句
![](https://i.imgur.com/XPeNwNm.png =500x)
![](https://i.imgur.com/s52fMEV.png =320x)
# 變數

## 變數 特點
* **<font color="#D92D71">更新變數</font>**
![](https://i.imgur.com/2EIzQeX.png =575x)

* **<font color="#D92D71">同時聲明多個變數</font>**
![](https://i.imgur.com/UJSODIT.png =520x)
![](https://i.imgur.com/LeW0lXz.png =320x)

* **<font color="#D92D71">不宣告, 不賦值, 會報錯</font>**

* **<font color="#D92D71">不宣告, 直接賦值使用, 是OK的</font>**
![](https://i.imgur.com/EaCllqm.png =180x)

## 案例：變數的使用
![](https://i.imgur.com/MQMVbiU.png =320x)
![](https://i.imgur.com/LXUTM9Y.png =420x)

## 變數命名規則
![](https://i.imgur.com/vGRABZH.png =600x)

## 案例：交換變數
![](https://i.imgur.com/vI5117h.png =300x)

## 變數類型
* **<font color="#D92D71">JS是弱類型、動態語言</font>**
![](https://i.imgur.com/ZkfUOjg.png =500x)

* **<font color="#D92D71">相同變數可以做不同的類型</font>**
![](https://i.imgur.com/5etBOzS.png =300x)

* **<font color="#D92D71">變數類型 分兩類：</font>**
![](https://i.imgur.com/BeumdbU.png =500x)
![](https://i.imgur.com/t5Rd4Ud.png =600x)

* **<font color="#D92D71">數字型支持八進制(前面加),十六進制(前面加0x)</font>**
* **<font color="#D92D71">JS中的最大值,最小值, 超過就會變成無窮大(Infinity), 無窮小(-Infinity)</font>**
![](https://i.imgur.com/F3ebXRY.png =500x)

* **<font color="#D92D71">NaN (Not a number)代表一個非數值</font>**
![](https://i.imgur.com/BF3NGD3.png =600x)

## 字符串 String
* **<font color="#D92D71">HTML屬性使用雙引號, 因此JS推薦使用單引號</font>**
![](https://i.imgur.com/QfMyan6.png =500x)

* **<font color="#D92D71">引號嵌套範例</font>**
![](https://i.imgur.com/FNOg1q9.png =500x)

* **<font color="#D92D71">轉譯符</font>**
![](https://i.imgur.com/HYtujR6.png =200x)

* **<font color="#D92D71">字符串拼接,結果會回傳字符串</font>**
![](https://i.imgur.com/KiqX2nf.png =600x)

## 不同變數類型一起運算
* **<font color="#D92D71">布爾型 + 數字型</font>**
>true當作1運算, false當作0運算
* **<font color="#D92D71">undefined + 字串型</font>**
> 'undefined' + '字串內容'
* **<font color="#D92D71">undefined + 數字型</font>**
> NaN
* **<font color="#D92D71">null + 字串型</font>**
> 'null' + '字串內容'
* **<font color="#D92D71">null + 數字型</font>**
> 返回原先數字
* **<font color="#D92D71">null + 布爾型</font>**
> 0 或是 1

## typeof() 獲取數據類型
![](https://i.imgur.com/86mgcxl.png =350x)

## 強轉數據類型
### **<font color="#D92D71">轉換成字符類型</font>**
![](https://i.imgur.com/0Yxbuic.png =650x)

### **<font color="#D92D71">轉換成數字類型</font>**
![](https://i.imgur.com/eVfaCHb.png =650x)
> 
>**<font color="#D92D71">parseInt() 得到的是整數</font>**
>
![](https://i.imgur.com/BPkN9LS.png =480x)
>
>**<font color="#D92D71">parseFloat() 得到的是整數</font>**
>
![](https://i.imgur.com/vdbOa50.png =480x)
>:::info
>:bulb:注意別寫錯parseInt()與parseFloat()的大小寫
>:::
>
>**<font color="#D92D71">Number()</font>**
>
![](https://i.imgur.com/11ymrz7.png =230x)
>
>**<font color="#D92D71">利用算式運算 </font>**
>
![](https://i.imgur.com/nCpKVal.png =230x)

### **<font color="#D92D71">轉換成布爾類型</font>**
![](https://i.imgur.com/0YaN9AD.png =430x)
![](https://i.imgur.com/EIYHlFR.png =530x)
![](https://i.imgur.com/j12THWE.png =340x)

## 標誌符, 關鍵字, 保留字
### **<font color="#D92D71">標誌符</font>**
![](https://i.imgur.com/Bk9wd7E.png =440x)
>
### **<font color="#D92D71">關鍵字</font>**
![](https://i.imgur.com/MEgYr1D.png =640x)
>
### **<font color="#D92D71">保留字</font>**
![](https://i.imgur.com/O1vxdlb.png =640x)

# 運算符
## **<font color="#D92D71">算數運算符</font>**
![](https://i.imgur.com/mp9npsn.png =490x)

## **<font color="#D92D71">遞增遞減運算符</font>**
>(略)

## **<font color="#D92D71">比較運算符</font>**
![](https://i.imgur.com/jSz2cO4.png =490x)
>:::info
>:bulb:'=='默認轉換數據類型, 會把字符型轉換成數字型
>:::
## **<font color="#D92D71">邏輯運算符</font>**
![](https://i.imgur.com/GEuivjp.png =290x)
>**<font color="#6eb22d">短路運算(邏輯中斷)</font>**
**當有多個表達式或值,左邊的表達式可以確定結果時,就不再運算右邊表達式的值。**
![](https://i.imgur.com/81roC6A.png =290x)
![](https://i.imgur.com/Tce5QM8.png =500x)
>
![](https://i.imgur.com/yRLBT1g.pngg =290x)
![](https://i.imgur.com/93OduRw.png =400x)

## **<font color="#D92D71">賦值運算符</font>**
>
![](https://i.imgur.com/NDBaeJI.png =490x)

## **<font color="#D92D71">運算符優先級</font>**
![](https://i.imgur.com/1uFyyKz.png =290x)

## **<font color="#D92D71">instanceof運算符</font>**
==用來檢測數據類型==

>**格式：變數/物件/陣列 名稱 instanceof 數據類型
　　　返回值為true , false**
![](https://i.imgur.com/mu65eqQ.png =490x)


# 流程控制
**<font color="#497c18">流程控制有三種順序結構, 分支結構, 循環結構, 代表三種代碼執行的順序</font>**
![](https://i.imgur.com/OsqKQFg.png =390x)

* **<font color="#D92D71">三元表達式</font>**
>**包含三元運算符**

* **<font color="#D92D71">分支流程控制 - if</font>**
![](https://i.imgur.com/jwFLTtu.png =250x)
>
* **<font color="#D92D71">分支流程控制 - switch</font>**
**表達式與值是 "===" 的關係, 意即值與數據類型要一致才可以。**
![](https://i.imgur.com/79TUpcJ.png =380x)

# 循環
* **for 循環**
(略)

* **雙重for 循環**
(略)
* **while 循環**
(略)
* **do while 循環**
(略)
* **continue break**
![](https://i.imgur.com/xMVz8XP.png =600x)

# 陣列(數組)
![](https://i.imgur.com/8ATjQPe.png =600x)
* **<font color="#D92D71">JS創建陣列的方式：利用new創建陣列</font>**
![](https://i.imgur.com/0uFvbQh.png =400x)
![](https://i.imgur.com/T4VzsMu.png =300x)
![](https://i.imgur.com/DrH8C8c.png =500x)
>:::info
>:memo:　第二種創建方式()裡的是陣列長度; 第三種創建方式()裡的是值、元素。
>:bulb:1. 陣列是物件的一種。
>:bulb:2. Arrar(), A要大寫。
>:bulb:3. Java陣列是用{ }, JS是用[ ]
>:::
* **<font color="#D92D71">JS創建陣列的方式：利用數組字面量創建陣列</font>**
![](https://i.imgur.com/qcYs3bU.png =400x)
>:::info
>:bulb:1. JS陣列可以放任意類型的數據
>:::
* **<font color="#D92D71">JS的陣列, 只要通過陣列下標賦值, 最大的下標值, 會自動給陣列做擴容操作。</font>**
	**<font color="#D92D71">如下列案例：下標[2]並賦值為"abc",數組長度即為3, 
	但[1]並沒有被賦值, 因此訪問後, 出現undefined的結果。</font>**
![](https://i.imgur.com/KqMgOPh.png =270x)
## 陣列的長度
![](https://i.imgur.com/svDZ535.png =370x)

## 陣列的遍歷
![](https://i.imgur.com/v8PFPLi.png =370x)

## 陣列的排序
**※需特別注意sort()的缺陷**
https://www.fooish.com/javascript/array/sort.html

# 二維陣列
```javascript=
格式：  var arr = [ [1,2], [1,2,3] , [1,2,3,4];
```

# 函數(函式[台])
![](https://i.imgur.com/mqsPePE.png =600x)
>:::info
>:bulb:函式宣告又稱"==具名函式==", 是以 function statement 的方式被建立，有hoist現象； <br>函數表達式又稱 "==匿名函式==", 要等待解釋器執行到函式的該行敘述時才會執行，這表示在解讀到他之前，我們都無法去呼叫他。
>:::
>:::warning
>+ 函式本身是一個物件
>+ 可以重覆被定義
>+ 不支援overloading (會有覆蓋問題)
>+ 要避免跟瀏覽器的全域方法取同個名字，會覆寫掉
>+ 可以用arguments來取得呼叫此函式時的所有實際引數資料
>+ 可以設定參數預設值
>:::
## 函數可以調用另一個函數
* **<font color="#D92D71">callback function 回調函式</font>**
(略)
## 函數實參與行參個數不匹配的結果
![](https://i.imgur.com/UgNtwEM.png =500x)

## 函數的重載與輸出結果
![](https://i.imgur.com/W00Ko6w.png =500x)

## Return
* **<font color="#D92D71">return 只能返回一個值, 如果有多個值, 會傳回最後一個</font>**
* **<font color="#D92D71">return 可以返回陣列與物件</font>**
* **<font color="#D92D71">如果有return, 則返回return後面的值, 如果沒有return, 則返回 undefined</font>**
* **<font color="#D92D71">如果有return, 則返回return後面的值, 如果沒有return, 則返回 undefined</font>**
* **<font color="#D92D71">return, break, continue的區別：</font>**
 ![](https://i.imgur.com/CsIk9NO.png =600x)

## arguements
![](https://i.imgur.com/xYrRs9t.png =600x)
![](https://i.imgur.com/OgzpH1N.png =500x)

* **<font color="#D92D71">範例：利用函數求陣列最大值(具名函數)</font>**
![](https://i.imgur.com/ykkwjLg.png =500x)

![](https://i.imgur.com/bYzBXb7.png =460x)

* **<font color="#D92D71">範例：利用函數求陣列最大值(匿名函數)</font>**
![](https://i.imgur.com/lAQIWhu.png =420x)

## 給參數預設值 (ES6)

![](https://i.imgur.com/4Mh7Mfe.png =350x)


## 立即函式(執行函式)
指的是可以立即執行的 Functions Expressions 函式表示式, 立即函式常用來限制作用域, 如果透過立即函式, 就連同函式宣告都能限制作用域。
```javascript=
（function(){  
    console.log(‘立即函式’);
 }
）( );


(function IIFE2() {
 console.log(‘立即函式2’);
}());
// 執行的小括號也可以直接寫在大括號後面
```
:::info
但即便他有名字，立即函式也不能在函式外被呼叫。
:::

立即函式也可以傳參數可以回傳值, 並以變數接收回傳值。下面的範例是將一個立即函式的執行結果傳遞給另一個立即函式：
```javascript=
var obj = {};
(function (a) {
 a.person = ‘小明’;
})(obj);
(function (b) {
 console.log(b.person);
})(obj);
```
將上面的範例修改一下, 將傳進第一個立即函式的參數改為全域物件window。第二個立即函式印出全域物件的屬性person：
```javascript=
(function(global) {
 global.person = ‘小明’;
})(window);
(function(c) {
 console.log(person);
})();
```
----

## 箭頭函數（Arrow Functions）ES6

```javascript=
let myFunction = () => {
  document.write("換個方式哈囉~<br>");
};
myFunction();

let myU = (name) => {
  document.write("哈囉~" + name + "<br>");
};
myU("Fan");
```

>:::info
>:bulb:延伸閱讀:https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/arrow_function.html
----
* **<font color="#D92D71">範例：箭頭函數與回調函數</font>**

==回調函數 callback function==(待學習 待更新)
```javascript=
function A_function(x) {
 document.write("這是A<br>");
  x();
  //x參數等於B_function; 
  //因此 x(); 就是等於 B_function();
};

function B_function() {
    document.write("這是B<br>");
};

A_function(B_function);
```

:::info
用來確保方法的使用時機, A方法必 會比B方法先執行。
:::



==箭頭函數 Arrow Functions (ES6)==(待學習 待更新)
```javascript=
let A_function = (x) => {
  document.write("這是A<br>");
  x();
  //x=B_function; 
  //x();=B_function();
};

let B_function = () => {
  document.write("這是B<br>");
};

A_function(B_function);
```
:::info
ES6 的箭頭函式 (Arrow Function) 沒有提供 arguments
:::
# 作用域
* **<font color="#D92D71">JS 採用詞法作用域(靜態作用域)：
 執行環境下去查找變數, 如果在裡面找不到的話, 就會去找外面一層, 若是再找不到就會繼續往上一層找, 以此類推。</font>**

* **<font color="#D92D71">JS的作用域又分作三層：
Global Level Scope 全局作用域
Function Level Scope (Local Scope) 局部作用域
Block Level Scope (ES6) ,只存在{}裡面 </font>**
>:::info
>在 ES6 之前，我們宣告變數只能使用 var 來宣告，而使用 var 宣告變數會有不少缺點，也無法形成 Block Scope 。
>以至於 ES6 推出了另外兩個宣告變數的方式：const 和 let。
>:::

![](https://i.imgur.com/jUZnDqa.png =700x)

## 變量的作用域

* **<font color="#D92D71">全域變數(全局變量)</font>**
  + 宣告在函式外的變數皆為全域變數。
  + 函式外未宣告直接使用之變數也為全域變數。
  + 全域變數指的是全域物件的屬性。

:::info
所有在函式外的變數皆為全域變數都是window的變數，<br>使用變數時可加上" window. "來呼叫變數( 省略也沒影響)。
:::

* **<font color="#D92D71">區域變數(局部變量)</font>**
  + 區域變數是在進入函式時被建立出來的，只能在函式中使用，函式結束時會將此變數空間收回。
  + 在函式內的都是區域變數。
  + 函式中的參數也是區域變數。
  + ==函式中使用變數時，會先以函式內開始找，找不到才會出去找==。

## var, let, const

![](https://i.imgur.com/SgTP9nI.png =400x)
>:::info
>:bulb:**1. 如果沒有區塊級作用域, 在{}宣告的變數, 在外面仍然可以使用**
>:bulb:**2. Hoist現象, 為變數預解析**
>:::
# 預解析
* **<font color="#D92D71">變數, 函數預解析 </font>**

![](https://i.imgur.com/doK14fD.png =320x)
>
![](https://i.imgur.com/VrG5hUx.png =700x)
# 物件(對象)
**<font color="#D92D71">JS物件分三種：
自定義物件, 內建物件(內置對象), 瀏覽器物件。
以下為自定義對象。</font>**
## 創建物件
* **<font color="#D92D71">創建物件三種方法 </font>**
* **<font color="#D92D71">利用字面量創建物件 </font>**
![](https://i.imgur.com/uUqGock.png =220x)

* **<font color="#D92D71">利用new Object創建物件 </font>**
![](https://i.imgur.com/89tpol7.png =220x)

* **<font color="#D92D71">利用構造函數創建物件 </font>**
![](https://i.imgur.com/FNSz8Dv.png =320x)
>:::info
>:bulb:構造函數方便創建多個物件。
>:bulb:構造函數類似於Java中的類。
>:bulb:new值執行時, 創建一個空物件。
>:bulb:this.用函數參數賦予屬性。
>:bulb:構造函數不需要添加return, 直接調用其產生的物件, 即可有返回值。
>:::
## 物件的調用
![](https://i.imgur.com/8a9r5n8.png =600x)
>:::info
>:bulb:**物件裡的資料為屬性與方法, 而非變數與函數。**
>　　![](https://i.imgur.com/1PLKeeJ.png =430x)
>:::
## 物件的遍歷
* **<font color="#D92D71">for (變數名稱 in 物件名稱) {<br>}</font>**
![](https://i.imgur.com/27phpiF.png =430x)
>:::info
>:bulb:通常使用k 或 key 作為遍歷變數名稱。
>:::

# js的內建函式(內置對象)
https://developer.mozilla.org/zh-CN/
https://www.w3schools.com/
* **<font color="#D92D71">Math (待更新) </font>**
* **<font color="#D92D71">Date (待更新) </font>**
* **<font color="#D92D71">Array (待更新) </font>**

:::info
:bulb:   **呼叫陣列方法：物件.方法();**
::: 


| 方法                       | 說明                                                           |
| -------------------------- | -------------------------------------------------------------- |
| sort()                     | 排序(有缺陷,只能比較個位數整數),排序會把數字轉乘文字串再轉乘unicode去比較unicode的大小。                                                   |
| toString()                 | 將陣列中的元素以逗點結合起來，傳回一個字串                     |
| reverse()                  | 將陣列中的資料順序反轉（會改變陣列內容）                       |
| join(字元)                 | 將陣列中的元素以特定的符號結合起來，傳回一個字串               |
| concat(參數…)              | 將陣列結合成一個新的陣列，並傳回陣列長度                       |
| ==push(資料)==                 | 將新的元素加到陣列的後便，並回傳陣列長度                       |
| pop()                      | 傳回陣列中的最後一個元素，並移除該元素                         |
| slice(start, end)          | 傳回索引值start處到end-1處的子陣列 ==(不會從原陣列中移除)==       |
| ==splice(start,n,ele1,ele2…)== | 傳回索引值start處後的n個元素 ==(會被移除)== 並插入ele1, ele2…      |
| shift()                    | 傳回陣列中第一個元素，並移除該元素                             |
| unshift(資料)              | 將新的元素加入陣列的最前面                                     |
| ==indexOf(data, start)==       | 自索引start處找出data在array中的位置索引值 ==(如果找不到會傳-1)== |

* **<font color="#D92D71">String (待更新) </font>**

* **<font color="#D92D71">其他 (待更新) </font>**


| 方法            | 說明                                                                                |
| --------------- |:----------------------------------------------------------------------------------- |
| parseInt()      | 將輸入的字串轉成整數                                                                |
| isNaN()         | 檢查參數是否非數字 ex:‘123’-> false 2021/12/12->true(false代表是數字，true代表不是) |
| eval()          | 計算字串，js代碼                                                                    |
| Array.isArray() | 檢查是否為陣列, 該方法有優於instanceof, 因為 Array.isArray()能檢測iframes           |
| ------          | ------                                                                              |

## 日期相關
![](https://i.imgur.com/xndZ1FY.png =620x)

# foreach / map

## foreach

```javascript=
const array1 = ['a', 'b', { c: 'tibame' }];

array1.forEach(function (element, index, arr) {
    console.log(element, index, arr)});	 //參數可以全寫,也可寫部分

const array2 = []; 	//新增空陣列
array1.forEach(function (element) {
    array2.push(element)}); 	// 傳值給新陣列
```
## map
```javascript=
const array1 = [1, 4, 9, 16, { c: 'tibame' }];

const map1 = array1.map(function(x){
return x;});
//map()會分配記憶體空間儲存新陣列並具備回傳值
//所以不用像forEach()要搭配push來產生另一個陣列

console.log(map1);
console.log(map1 === array1);//新陣列, 所以false

map1[0] = 11111;
console.log(map1[0], array1[0]);//11111 1
console.log(map1[0] === array1[0]);//新陣列,互不影響 所以false

map1[4].c ="TIBAME";
console.log(map1[4], array1[4]);//{c: "TIBAME"} {c: "TIBAME"}
console.log(map1[4] === array1[4]);//物件一定是傳址,所以會被改動到 true
```



## foreach / map比較

map可以直接塞資料到新陣列, foreach不行

```javascript=
const array1 = [1, 4, 9, 16];
const map1 = array1.map(function (item) {
            return item
});
const forEach1 = array1.forEach(function (item) {
            return item
});
console.log(map1);//[1, 4, 9, 16] 
console.log(forEach1);//undefined
```




# 數據類型
## 簡單類型 (值類型)
![](https://i.imgur.com/jhL7zrg.png =580x)

>:::info
>:bulb:null數據類型 返回的是一個空的物件。
>:::

## 複雜類型 (引用類型)
![](https://i.imgur.com/NrJYSQg.png =590x)


## 棧跟堆的概念
>:::info
>:bulb:一般程式語言有棧跟堆的概念,但是 **<font color="#D92D71">JS沒有</font>**, 只是用來方便理解：
![](https://i.imgur.com/naogc85.png =620x)
![](https://i.imgur.com/TD3ZGlC.png =620x)
>:::















# BOM (Browser Object Model，瀏覽器物件模型)

![](https://i.imgur.com/RpVhXaJ.png =620x)

![](https://i.imgur.com/lGuqVWv.png =520x)


| 屬性名      | 作用                         | 
| ----------- | ---------------------------- | 
| name        | 指定視窗的名稱               | 
| document    | 文件物件                     | 
| history     | 歷史物件(回上一頁)           | 
| loaction    | 位置物件                     |
| screen      | 螢幕物件                     |
| console     | 主控台物件                   |
| innerHeight | 視窗內的高度（含捲軸）       |
| innerWidth  | 視窗內的寬度（含捲軸）       |
| outerHeight | 視窗的高度（含捲軸、工具列） |
|outerWidth	 | 視窗的寬度（含捲軸、工具列） |
|pageXOffset |	文件左上角被捲出的寬度 |
|pageYOffset |	文件左上角被捲出的高度 |




















# DOM (Document Object Model，文件物件模型/頁面文檔模型)
* **<font color="#D92D71">用來處理可擴展標記語言(HTML或XML)的標準編接口<br>通過DOM接口, 改變網頁的內容, 結構, 樣式。</font>**


* **<font color="#D92D71">DOM樹</font>**
![](https://i.imgur.com/fb9on6E.png =420x)

## 獲取頁面元素
* **<font color="#D92D71">根據ID名獲取</font>**
```javascript=
var element  = document.getElementById(id);
```
![](https://i.imgur.com/Jd8wTTn.png =520x)
![](https://i.imgur.com/KRrTExZ.png =520x)

![](https://i.imgur.com/UekAaSO.png)
>
* **<font color="#D92D71">根據標籤名獲取</font>**
```javascript=
var list  = document.getElementByTagName(標籤名);
```
![](https://i.imgur.com/X1v5Uvt.png)

![](https://i.imgur.com/L9sVc4g.png =520x)

![](https://i.imgur.com/hwVUIQb.png =520x)

* **<font color="#D92D71">根據類名獲取(HTML5)</font>**

![](https://i.imgur.com/6Q0J0si.png =620x) 
![](https://i.imgur.com/5gudA3c.png =520x)

* **<font color="#D92D71">獲取特殊元素</font>**
![](https://i.imgur.com/302uGAw.png =420x)

![](https://i.imgur.com/j5fgAuq.png =420x)

## 元素註冊事件 事件基礎
* **<font color="#D92D71">事件三要素：事件源、事件類型、事件處理程序</font>**
![](https://i.imgur.com/xNTBwLr.png =290x)


![](https://i.imgur.com/lFf2enm.png =570x)

* **<font color="#D92D71">常見滑鼠事件</font>**

![](https://i.imgur.com/UuQUNEy.png =270x)

## 操作屬性

![](https://i.imgur.com/UiY32HQ.png =570x)

![](https://i.imgur.com/k24vil4.png =770x)


### 修改元素屬性
![](https://i.imgur.com/PN0eQxS.png =330x)

### 修改樣式屬性
![](https://i.imgur.com/qKb0Pbx.png =330x)

![](https://i.imgur.com/nbzMDKn.png =490x)


### 表單元素的屬性操作

![](https://i.imgur.com/Ey3CtA6.png =380x)

![](https://i.imgur.com/OgbnXXz.png =590x)

* **<font color="#D92D71">練習：密碼明文輸入欄</font>**

![](https://i.imgur.com/GpidOFX.png =380x)

![](https://i.imgur.com/2QGBD0N.png =490x)

## 創建元素
## 操作節點 

>:::info
>:bulb:
>:::


































