[JavaScript] 操控 DOM 元素

#DOM #javascript

Posted by Nicolakacha on 2020-09-06

本篇會介紹怎麼用 JavaScript 操控 DOM 元素，如何監聽不同的瀏覽器事件並做出反應

DOM (Document Oject Model)

什麼是 DOM？ 簡單理解就是把 Document 的元素變成物件
舉例來說，我們可以選取該網頁文件，找到裡面的 .header，新增文字，賦予值叫 Hello World：

document.querySelector(".header").textContent = "Hello World"

選取 DOM 元素

getElement

getElementByTagName('div') 選到標籤
getElementByClassName('block') 選到該 class
getElementByID('header') 選到某 id

querySelector

可以直接用 CSS 選取器的方法來選去 DOM 元素
querySelector('div')
querySelector('.className')
querySelector('#id')

但要注意 querySelector 只會選到第一個，如果要選多個，需要使用 querySelectorAll
querySelectorAll('div') // 選到全部的 div

把 DOM 元素 存為一個變數方便每次使用

let element = document.querySelector(".header")

NODE 其他選取方式

parentNode 選到父節點
parentElement 選到父元素
childNodes 選到子節點 // 要注意它也會把空格也視為節點
children 選到子元素 // 只會選到 element
firstChild 選到第一個子節點 // 要注意也會選到空格節點
firstElementChild 選到第一個子元素
lastChild 選到最後一個子節點 // 要注意也會選到空格節點
lastElementChild 選到最後一個子元素
nextSibling 選到下一個節點 // 會選到空格節點
nextElementSibling 選到下一個元素
previousSibling 選到上一個節點 // 會選到空格節點
previousElementSibling 選到上一個元素

改變 DOM 元素

直接幫 DOM 元素改 CSS 樣式

.style[padding-top"] = "10px"
.style["paddingTop"] = "10px"

改變 DOM 元素的 class

.classList.add("active") // 增加 active 這個 class
.classList.remove("active") // 移除 active 這個 class
.classList.toggle("active") // 開關 active 這個 class
.classList.contains("sample") // 有沒有這個 class

<body>
    <div id="block">Hello World!</div>
</body>
<style>
    .class {
        font-size: 14px;
    }
</style>
<script>
    const element = document.querySelector("#block");
    element.classList.add("active")
</script>

改變 DOM 元素的內容

.innertext = "hello world" // 抓 DOM 元素裡文字內容來改
.innerHTML = "hello world" // 把 DOM 元素中全部的東西拿出來
.outterHTML = "hello world" // 把 DOM 元素（含 DOM 元素本身）全部的東西抓出來
.textContent = "Hello World" // 賦值
.setAttribute("style", "color: red") // 賦屬性
.innerText 關注 style，而 textContnet 則不

增加屬性

.setAttribute('title', 'Hello Div')

插入與刪除元素

createElement 來建立一個物件
createTextNode 建立純文字
.insertBefore(newDiv, h1) 在 h1 之前插入 newDiv
.appendChild 把物件插入回 HTML 內

<body>
    <div id="block">Hello World!</div>
</body>
<script>
    const element = document.querySelector("#block");
    const item = document.createElement("div") //插入 <div>
    const item = document.createElement("123") //插入 123
    element.appendChild(item)
</script>

用 removeChild 把物件刪除

element.removeChild(document.querySelector("a"))
// 把 a 元素刪除

Event

e.clientX / e.clientY is from the browser 找絕對座標
e.offsetX / e.offsetY is from the target itse 找相對座標
e.altKey / e.ctrlKey / e.shiftKey 檢查這些按鍵是否按著
mouseenter / mouseover 滑鼠移進移出
mouseleave / mouseout 滑鼠移進移出

上面兩組事件看起來功能一樣，但在冒泡事件上的支援不同，mouseenter 和 mouseleave 不支援冒泡事件，舉例而言，在一個元素上的子元素上進出或離開的時候，會觸發 mouseover 和 mouseout 事件，但卻不會觸發 mouseenter 和 mouseleave 事件
體驗看看

mousemove 滑鼠移動
keydown / keyup / keypress 鍵盤輸入
focus 對焦 input 框 / blur 取消對焦
cut / paste
input 所有對 input 可以做的事都會觸發這個事件

Event Listenser

element.addEventListener("監聽的事件名稱", 要做什麼的函式)

<body>
    <div id="block">Hello World!</div>
</body>

<script>
    const element = document.querySelector("#block");
    element.addEventListener("click", function(){
        alert("click!")  // 匿名函式
    })
</script>

e 是什麼？

瀏覽器會呼叫這個 function 的時候帶的參數，利用這個參數來拿到這個事件相關的資訊

const element = document.querySelector("#block");
element.addEventListener("click", function(e){
    console.log(e) //該事件所有的參數
    console.log(e.target) // 該事件觸發的目標
}

表單處理

<script>
    const element = document.querySelector(".login-form");
    element.addEventListener("submit", function(e){
        alert("submit");
    })
</script>

用 e.preventDefault() 可以阻止預設行為

<script>
    const element = document.querySelector(".login-form");
    element.addEventListener("submit", function(e){
        e.preventDefault()
    })
</script>

事件傳遞機制

事件傳遞可以分為三個階段，事件捕獲 -> 目標 -> 事件冒泡，可以利用 addEventListener 的第三個參數來決定要再捕獲或冒泡階段去監聽這個事件，但當事件傳到 target 本身，沒有分捕獲跟冒泡
true 代表添加到捕獲階段；false (預設) 代表添加到冒泡階段

事件傳遞會從 DOM tree 的最外層開始向內層傳遞，直到觸發事件的元素（e.target），再往上層冒泡至 DOM tree 的最外層。當事件傳遞到觸發事件的元素（e.target）時，是沒有分冒泡或捕獲階段的，無論 addEventListener 的第三個參數是 true 還是 false，e.eventPhase 都是 AT_TARGET。

注意：當事件傳遞到點擊的真正對象，也就是 e.target 時，無論使用 addEventListener 的第三個參數是 true 還是 false，這邊的 e.eventPhase 都會變成 AT_TARGET。

preventDefault 跟 JavaScript 的事件傳遞「一點關係都沒有」，加上這一行後，事件還是會繼續往下傳遞。

捕獲：事件傳遞機制中，由 DOM tree 最外層向內逐層傳遞，觸發各節點的事件監聽。

冒泡：事件傳遞機制中由觸發事件的元素，向外逐層傳遞觸發各元素的事件監聽，直到 DOM tree 的最外層。

停止事件傳遞

停止傳遞

e.stopPropagation()

要注意同層級剩下的 listener 仍然會被執行

停止所有同層級的事件傳遞

e.stopImmediatePropagation()

阻擋預設行為

event.preventDefault()：是阻擋事件的預設行為，和事件傳遞沒有關係，並不影響事件傳遞。像點擊 <a> 連結會觸發連結到某個網址，使用 event.preventDefault() 可以阻擋這個動作。

事件代理

利用事件傳遞機制的原理，去監聽外層的元素，判斷 e.target 是我們要的目標節點時，再去做後續的操作，在很多情況下就可以不用去重複監聽無數個目標物，底下有個簡單的範例：

有一個 ul，底下 1000 個 li，如果你幫每一個 li 都加上一個 eventListener，你就新建了 1000 個 function。

但我們剛剛已經知道，任何點擊 li 的事件其實都會傳到 ul 身上，因此我們可以在 ul 身上掛一個 listener 就好。

<!DOCTYPE html>
    <html>
        <body>
            <ul id="list">
                <li data-index="1">1</li>
                <li data-index="2">2</li>
                <li data-index="3">3</li>
            </ul>
    </body>
</html>

document.getElementById('list').addEventListener('click', (e) => {
  console.log(e.target.getAttribute('data-index'));
})

而這樣的好處是當你新增或是刪除一個 li 的時候，不用去處理跟那個元素相關的 listener，因為你的 listener 是放在 ul 身上。這樣透過父節點來處理子節點的事件，就叫做事件代理。

window.addEventListener('click', (e) => {
  console.log(e.target);
}, true)

利用事件傳遞機制的特性，在window上面使用捕獲，就能保證一定是第一個被執行的事件，你就可以在這個 function 裡面偵測頁面中每一個元素的點擊，可以傳回去做數據統計及分析。

資料儲存

cookie

Server 端透過 HTTP response 把資料寫到 cookie
在 header 內的 Set-Cookie 可以存放 cookie
所有的 request 都會自動把瀏覽器的 cookie 帶上去，為了讓瀏覽器可以辨識身份

local storage

const oldValue = windows.localStarge.getItem("text")
document.querySelector(".text").value = oldValue;

document.querySelector('button').addEventListener("click"), 
function() {
  const value = document.querySelector(".text").value
  window.localStorage.setUtem('text', value)
}

session storage

只在這個分頁存在的時候有效，不同的分頁也不能共享

const oldValue = windows.sessionStorage.getItem("text")
document.querySelector(".text").value = oldValue;

document.querySelector('button').addEventListener("click"), 
function() {
  const value = document.querySelector(".text").value
  window.sessionStorage.setUtem('text', value)
}

其他補充

Lazing Loading 無限捲動


#DOM #javascript

Nicolakacha




Related Posts

Leetcode 刷題 pattern - Fast & Slow Pointer

Leetcode 刷題 pattern - Fast & Slow Pointer

 Po-Jen
loading 百分比

loading 百分比

 mijouhsieh
[W3-r24-D18]_the-Action

[W3-r24-D18]_the-Action

 KutouLife

Comments