jQuery DOM 操作是什麼？讀取與設定的四大類方法
DOM 的操作不外乎 讀取（Getter） 與 設定（Setter） 。
- 讀取：從 DOM 中取得資訊以供後續使用。
- 設定：改變 DOM 的屬性、設定樣式，或是插入、複製、移除。
同一個名稱，靠參數切換
jQuery 的操作方法多半一名兩用：不給參數或只給屬性名時是讀取，多給一個值時就變成設定。少寫一個參數，設定就會變成讀取，是很常見的疏忽。
一般屬性
處理寫在 HTML 標籤上的屬性，例如：連結的網址、圖片的來源與替代文字。它操作的是標籤本身的內容，而不是元素當下的狀態，所以勾選、輸入這類會變動的值不適合從這裡讀取。
| 方法 | 說明 |
|---|---|
attr() | 可讀取和設定 DOM 的屬性。 |
removeAttr() | 可移除 DOM 的屬性。 |
詳細用法請見 HTML 屬性 。
樣式屬性
直接操作元素的樣式，讀取時拿到瀏覽器計算後的實際值，設定時則寫成行內樣式。它最適合處理必須即時算出來的數值。
| 方法 | 說明 |
|---|---|
css() | 可讀取和設定 DOM 的行內樣式。 |
scrollTop() | 可讀取和設定 DOM 目前在捲軸的垂直位置。 |
詳細用法請見 CSS 樣式屬性 。
類別屬性
不直接碰樣式，而是替元素加上或拿掉 class，實際的外觀仍由 CSS 決定。樣式集中在樣式表、程式只負責切換狀態，是最好維護的做法。
| 方法 | 說明 |
|---|---|
addClass() | 為 DOM 添加 class。 |
removeClass() | 為 DOM 移除 class。 |
詳細用法請見 CSS 類別 。
插入到 DOM 中
讀取或替換元素的內容，是把資料呈現到畫面上最直接的手段。兩個方法的分野只有一個：字串要不要被當成 HTML 解析，這同時也是安全性的分界。
| 方法 | 說明 |
|---|---|
text() | 可讀取和設定 DOM 的文字內容。 |
html() | 可讀取和設定 DOM 的 HTML 內容。 |
詳細用法請見 插入到 DOM 中 。
常見問題
為什麼讀取和設定用同一個方法名稱？
jQuery 靠參數個數判斷：不給參數或只給屬性名時是讀取，多給一個值時就變成設定。少寫一個參數就會從設定變成讀取，是很常見的疏忽。
選到多個元素時，讀取會拿到哪一個？
只會拿到集合中第一個元素的值。反過來說，設定則會套用到集合中的每一個元素。若要精準指定，可搭配 過濾方法 。
改樣式該用 css 還是 addClass？
多數情況建議用 類別 。把樣式集中寫在 CSS 檔裡，程式只負責切換類別，維護與重用都比較容易；css() 適合處理需要動態計算出來的數值。
text 和 html 該怎麼選？
只要放純文字就用 text() ，它會把標籤當成字串處理，比較安全。需要插入實際的 HTML 結構時才用 html()，並且務必確認內容來源可信。
