# [JavaScript] DOM概念

###### tags: `JavaScript`

* 簡化id寫法

原先js宣告html的ID呼叫方式

透過var變數，可簡化寫法
之後宣告就可以寫成el.[宣告]＝"數值";

* querySelector


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

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

* querySelectorAll


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

*更換指定呼叫setAttribute，('單位宣告','取代值')

*取得值.getAttribute('單位宣告')

## 插入HTML標籤的方式


### 寫法一：innerHTML

在js欄位裡若要輸入html語法可使用innerHTML支援
先將所需的變數統統做宣告，在透過inner語法統一載入

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

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

### 寫法二：createElement


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

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

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