---
# System prepended metadata

title: 'JavaScript 學習筆記 - 7: DOM (Document Object Model)'
tags: [JavaScript 學習筆記]

---

###### tags: `JavaScript 學習筆記`
# JavaScript 學習筆記 - 7: DOM (Document Object Model)
## 節點樹
![](https://i.imgur.com/wvj4U8b.png)
只要產生一個網站
就會出現節點樹 Dom Tree (如上圖)
在檢查(F12)中輸入 document 可得到整份文件

## 環境設置
把`<scrip scr="all.js"></scrip>`
從`<head>`移到`<body>`的最後一行
好處: 會由上到下等全部跑完抓取所有的節點, 放前面會抓不到特定資料

## 抓取資料: qureySelector 選擇器
```
document.querySelector(".Selector");
```
## 寫入文字資料: textContent
```
document.querySelector(".Selector" or "tag").textContent = "XXXXX";
```
或
```
const a = document.querySelector(".Selector");
a.textContent = "XXXXX";
```
都可達到同樣動態更改文字的效果

## 插入網頁元素 HTML標籤: innerHTML
用來增加網頁結構，會把原本的預設內容刪除
```
const main = document.querySelector(".main");
main.innerHTML = `<h1 class="header"><span>XXX</span></h1>`
```

## 用 innerHTML 加入變數
```
const list = document.querySelector(".list");
let myLink = "##";
let myContent = "XXX"
list.innerHTML = `<li><a href="${myLink}">${myContent}</a></li>`
```
會在 HMTL 檔案裡的 .list 新增內容，覆蓋掉原本的內容
想更改變數就可輕鬆更改
也可寫成：
```
let content = `<li><a href="${myLink}">${myContent}</a></li>`
list.innerHTML = content + content
```
### textContent 和 innerHTML 的差異



| textContent | innerHMTL | 
| -------- | -------- | 
| 改變文字部分    | 改變網頁結構     | 

## 增加 HTML 標籤屬性: setAttribute
變數.setAttriubte("要新增的屬性 Attribute", "要新增的屬性內容");
```
const myLink = document.querySelector("a");
myLink.setAttribute("href", "#");
mylink.setAttribute("class", "red");
```
Note: 需先有描述屬性的內容，才可直接寫 "red"

## 重複選取多個元素: querySelectAll
querySelect 只會選取抓取到的第一個，只回傳一個DOM

```
const myLinks = document.querySelectorAll("a");
myLinks[0].setAttribute("href", "#");
mylinks[0].setAttribute("class", "red");
```

## 取值方法


| .innerHTML | .textContent | .getAttribute |
| -------- | -------- | -------- |
| 取出指定標籤內的<br>HTML 結構     | 取出節點<br>故只會取出文字資訊     | 取出 Attribute Name     |

## 表單元素取值方式
### .value
可以取值也可以賦值

### 
