[ Day 13 ] - 如何透过 DOM 抓取网页元素

本日要来说明如何透过 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');

结果如下：

本日小节

今天各种卡，网路卡，快要天窗啦～
这次简单介绍几个选取节点的方式，有问题欢迎传讯息给我，我们下次见～