本日要來說明如何透過 DOM 取得網頁元素，直接動手做看看！

• 下面 JS 所使用的 HTML 範例如下：

<h1 class="header">大大大優惠</h1>
    <ul>
        <li class="list">test1</li>
        <li class="list">test2</li>
    </ul>
    <p id ="kare">咖哩拌飯～</p>

querySelector()

可以取得第一個找到符合的樣式，可以以 CSS 選擇器或是標籤名稱來查找

const el = document.querySelector('h1');

也可以這樣寫

const el = document.querySelector('.header');

取出結果如下：

querySelectorAll()

可以取得所有符合條件的節點，所以回傳的資料會有多個

const els = document.querySelectorAll('li.list');
    els[1].classList.add('list-test');  // 將取得的 els[1] 的資料，增加 class 名稱

結果如下：

getElementById()

利用 ID 屬性取得一個符合的節點

const el = document.getElementById('kare');

結果如下：

本日小節

今天各種卡，網路卡，快要天窗啦～
這次簡單介紹幾個選取節點的方式，有問題歡迎傳訊息給我，我們下次見～