※ 認識DOM(三)

※ 查找 DOM 元素有兩種途徑：

• 直接選出一個節點 (select)：要在樹狀結構裡查找資料，至少要先選出第一個元素。
• 從一個特定節點，查找到週邊的節點 ：選出一個元素後，就可以順著結構找出父元素、子元素 、甚至同一層的兄弟元素，這種行為稱為「遍歷 (traverse)」。

※ 選出特定 DOM 節點的語法 ：

• querySelector：搭配指定 CSS 選擇器選出一個元素節點，如果有很多個元素，則會直接回傳第一個找到的結果。

語法：element = document.querySelector(selector)

程式碼拆解：

1. document:在文件裡尋找。
2. querySelector:選取網頁上的元素。
3. 參數：selector：一個包含一個或多個 CSS 選擇器的字符串。

// 選取第一個 class 為 'example' 的 div 元素
const div = document.querySelector('div.example');

// 選取 id 為 'header' 的元素
const header = document.querySelector('#header');

• querySelectorAll：搭配指定 CSS 選擇器選出很多元素，回傳一個類似陣列的 NodeList。

1. 語法：nodeList = document.querySelectorAll(selector)
2. 參數：selector：一個包含一個或多個 CSS 選擇器的字符串。

// 選取所有 class 為 'example' 的 div 元素
const divs = document.querySelectorAll('div.example');

// 選取所有位於列表中的項目元素
const items = document.querySelectorAll('ul > li');

※ 修改 DOM 節點的語法 ：

新增節點：

document.createElement(tagName)：新增一個元素。

用textContent 寫入文字資料：

在JS中宣告一個變數，把變數指向到DOM網頁元素位置去。直接選取變數來更改網頁文字內容、並重新賦予值。

//JS部分
const el = document.querySelector('h1');
el.textContent = "hello world";   //寫法較簡潔

修改元素的內容：

• NODE.innerHTML = "修改元素的內容" ： 會解析 HTML 標籤。
• NODE.innerText = "修改元素的內容" ： 不會解析 HTML 標籤（只處理文字）。

將節點插入 DOM Tree：

元素建立之後，在瀏覽器上還看不到，需要透過 appendChild、insertBefore 或 replaceChild 等方法將新元素加入至指定的位置之後才會顯示。常用到的是 appendChild。

語法：NODE.appendChild(Node)

刪除節點：

• parentElement.removeChild(NODE)
• NODE.remove()

※ DOM 元素可以調整那些內容：

※ 樣式：classList，className和style。

說明：

classList: 這是一個元素的類別屬性的集合，提供了添加、刪除和切換CSS類別的方法。

className: 這是一個表示元素class屬性的字符串。可以直接修改這個屬性來改變元素的類別。

style: 這個屬性允許直接在元素上設定行內樣式。

操作 CSS樣式：

• NODE.classList ： 查看目前所有 class 名稱，會回傳類似陣列的清單。
• NODE.classList.add(className1, className2) ： 加入一個或多個樣式。
• NODE.classList.remove(className1, className2) ： 刪除樣式。
• NODE.className = className - 如果樣式只有一個，也可以直接寫入。

操作style 屬性：改變的是元素的視覺呈現（即CSS樣式），並不會改變HTML源代碼中的屬性值。

• NODE.style.backgroundColor
• NODE.style.borderStyle

※ 屬性：修改的是元素的HTML屬性。

屬性操作：

getAttribute()-得到屬性內容，setAttribute()-新增或修改屬性內容。

※ 內容：innerHTML-取得HTML，innerText-改變裡面的文字內容。

※ Javascript Even機制：

在DORM元素上新增一個監聽器，來偵測使用者的操作行為，接著監聽器收到訊號後會如何執行對應程式

執行程序：

1. addEventListener：增加一個事件監聽器
2. callback function
3. capturing & bubbling

※ 設置事件(Event Handler)：

設置事件時，需要考慮到幾個基本要件：

• 觸發事件的 HTML 元素
• 事件類型，如 click、submit、keyup....
• 想要觸發的程式，會是一個函式，該函式會稱為事件處理器 (event handler)

※事件監聽器(Event Listener)：

// listener
element.addEventListener('click', greeting)
// handler
function greeting() {
  alert('handling event')
}

addEventListener 可以傳入三個參數：

• 事件名稱 (event name)，如 'click'
• handler，要啟動的 function，也可以直接使用匿名函式
• useCapture，切換 capturing 機制

※ 常見事件種類：

滑鼠事件(mouse event)：

• click - 滑鼠點擊元素
• mousemove - 滑鼠滑過元素
• mouseout - 滑鼠離開元素

鍵盤事件(keyboard event)：

• keydown - 點擊且長按一個鍵時
• keyup - 放開按鍵時

表單事件：

• submit - 提交表單時
• focus - 點擊某個輸入框時
• input - 輸入框內容改變時

other事件：

• 檔案讀取(document 事件)
• 視窗變化相關的事件resize，scroll，load