※ 認識DOM(三)

閱讀時間約 6 分鐘

※ 查找 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):新增一個元素。

raw-image

用textContent 寫入文字資料:

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

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

修改元素的內容:

  • NODE.innerHTML = "修改元素的內容" : 會解析 HTML 標籤。
  • NODE.innerText = "修改元素的內容" : 不會解析 HTML 標籤(只處理文字)。
raw-image

將節點插入 DOM Tree:

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

語法:NODE.appendChild(Node)

raw-image

刪除節點:

  • 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)

raw-image

設置事件時,需要考慮到幾個基本要件:

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

事件監聽器(Event Listener)

raw-image
// 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


    全端網頁開發專業知識分享
    留言0
    查看全部
    發表第一個留言支持創作者!
    ※ 認識非同步概念(二)
    閱讀時間約 2 分鐘
    ※ 認識非同步概念(三)
    閱讀時間約 2 分鐘
    ※ 認識非同步概念(四)
    閱讀時間約 6 分鐘
    ※ 認識非同步概念(五)
    閱讀時間約 1 分鐘
    ※ 認識DOM(一)
    閱讀時間約 2 分鐘
    ※ 認識DOM(二)
    閱讀時間約 1 分鐘
    你可能也想看
    南管,是我生命的全部:認識南管音樂家王心心(上)在南管之鄉、在南管世家成長的王心心說,她睜眼、閉眼間,盡是悠悠南管在耳邊響起。
    Thumbnail
    avatar
    風潮音樂 Wind Music
    2024-05-02
    🇭🇺【葡萄酒產區巡禮】認識匈牙利托凱產區 (Tokaj)托凱 (Tokaj) 產區位於匈牙利的東北方和斯洛伐克 (Slovakia) 的交界處,喀爾巴阡山脈 (Carpathian Mountains) 的山腳下,是世界最為知名的貴腐甜白酒產區之一,這邊產的葡萄酒稱為托卡伊 (Tokaji)。不過近年來,晚摘酒和不甜的酒款也越來越受到歡迎。
    Thumbnail
    avatar
    tengyuan
    2022-02-26
    🇺🇸【葡萄酒產區巡禮】認識美國加州產區加州大部分的葡萄酒都產自位於內陸的農業經濟重心的中央谷地,土壤肥沃,透過引水灌溉來提高產量。比較優質的葡萄酒則大多來自於加州沿岸,因為受到洋流的影響,氣候比較冷涼,需要花比較多的心思照顧葡萄園。加州主要的葡萄園可以畫分成五個區域,大部分的 AVA 來自於其中的三個區域:北海岸、中部海岸,與中央谷地。
    Thumbnail
    avatar
    tengyuan
    2022-01-15
    起司美味|從毛球認識義大利Pecorino Al Tartufo松露風味綿羊起司【起司很有事】專題近期開設一的新的欄目:〔起司美味〕這個單元,是介紹一些餐廳起司入菜的菜品,藉由他們創意美味,認識一款起司,大家也可嘗試他們的作品認識一款起司另一種風味。 起司加握壽司等於毛球?這是什麼鬼呀?
    Thumbnail
    avatar
    許昭晶
    2020-11-29
    當呼吸道融合病毒大流行,需要認識「急性細支氣管炎」的治療與預防最近台灣正值一波「呼吸道融合病毒」的大流行,有不少兩歲以下的孩童感染了呼吸道融合病毒,而染上急性細支氣管炎而必須住院治療,嚴重一點的孩童甚至喘到需要住到加護病房,接受呼吸器的支持。今天要為大家簡介急性細支氣管的症狀、嚴重度的區分及相應的治療方法,並告訴家長如何避免孩童得到急性細支氣管炎......
    Thumbnail
    avatar
    蒼藍鴿
    2020-11-23
    「我們對這個世界的認識,只不過是隔靴搔癢。」—《異鄉人》卡繆「Is it just me, or is it getting crazier out there?」—《JOKER》 小丑在笑,不代表開心;莫梭沒哭,不代表無情,但因為不符合社會期待,被視作異類。然而,透過卡繆的筆,我們可以窺探莫梭的內心,得以比較出外在世界多麽荒謬。
    Thumbnail
    avatar
    Krachreading
    2020-07-01