---
# System prepended metadata

title: '[JavaScript] DOM概念'
tags: [JavaScript]

---

# [JavaScript] DOM概念

 ###### tags: `JavaScript`



* 簡化id寫法

原先js宣告html的ID呼叫方式
![](https://i.imgur.com/lnPW7sm.png)

透過var變數，可簡化寫法
之後宣告就可以寫成el.[宣告]＝"數值";
![](https://i.imgur.com/ID6wYzE.png)



* querySelector

![](https://i.imgur.com/AouB3iQ.png)


除了常用的getElementById，也可使用querySelector，除了原先可呼叫指定ID，也能針對html裡的指定元素em 或 class來呼叫，方便性及指定功能較為彈性。

下圖是為了修改html的em數值，示範透過querySelector指定方式做變換。

* querySelectorAll

![](https://i.imgur.com/rX8qdBu.png)

若html的em項目有兩個以上，即可使用querySelectorAll，以陣列的方式宣告，同時利用迴圈做搜尋、變更多個em動作。


*更換指定呼叫setAttribute，('單位宣告','取代值')
![](https://i.imgur.com/cYzo1lL.png)


*取得值.getAttribute('單位宣告')
![](https://i.imgur.com/6lssFZt.png)


## 插入HTML標籤的方式

![](https://i.imgur.com/7Espoxc.png)

### 寫法一：innerHTML


在js欄位裡若要輸入html語法可使用innerHTML支援
![](https://i.imgur.com/kPl6w4k.png)
先將所需的變數統統做宣告，在透過inner語法統一載入
![](https://i.imgur.com/tTM0TLJ.png)

#### innerHTML與for迴圈的應用
![](https://i.imgur.com/rpPfqn4.png)

* 變數str需宣告''字串
* 需增加str+=content做累加，如果沒有寫這行，結果只會出現最後一農夫的名字，因為迴圈跑出的結果會覆蓋前一個
* 結束迴圈後，在新增el.innerHTML =str，str在迴圈裡就需要寫上累加的公式。

### 寫法二：createElement 

![](https://i.imgur.com/UQT6Z89.png)

* 先將上面的條件都寫好，彙整到str裡，再運用增加子節點的公式在querySelector後方新增.appendChild(宣告str)
* str=document.createElement('em')公式，em是指定位置裡的`<em>`宣告部分，可做更換。

#### CreateElement與for迴圈的應用

![](https://i.imgur.com/cCZb4ln.png)
* 在for迴圈內新增一組str宣告，載入需新增的項目如農夫名字或者文字顏色，在最後新增el.appendChild(str);
* 相較於innerHTML，此語法可以保留之前宣告的項目不會刪除資料顯示最後一組。
* 需要注意的是在for迴圈裡載入appendchild語法需宣告外圈el(宣告html裡的list主題)。
 




