通過 CSS Selector

考慮使用 html 程式碼

<ul>
  <li id=`one` class=`main`>Item 1</li>
  <li id=`two` class=`main`>Item 2</li>
  <li id=`three` class=`main`>Item 3</li>
  <li id=`four`>Item 4</li>
</ul>

下面的 dom 樹將基於上面的 html 程式碼構建

                      ul
    
                      |
    
     |          |         |         |
    
    li         li        li        li
     |          |         |         |
Item 1        Item 2    Item 3    Item 4

我們可以在 CSS 選擇器的幫助下從 DOM 樹中選擇元素。這可以通過兩種 javascript 方法 viz querySelector() 和 querySelectorAll() 實現。

querySelector() 方法返回與 DOM 中給定的 css 選擇器匹配的第一個元素。

document.querySelector('li.main')

返回第一個 li 元素，其類是 main

document.querySelector('#two')

返回 id 為 two 的元素

注意： 如果沒有找到元素，則返回 null。如果選擇器字串包含 CSS 偽元素，則返回將為 null。

querySelectorAll() 方法返回與 DOM 中給定的 css 選擇器匹配的所有元素。

document.querySelectorAll('li.main')

返回一個節點列表，其中包含所有 li 元素，其類是 main。

注意 ：如果未找到任何元素，則返回空節點列表。如果選擇器字串包含 CSS 偽元素，則返回的 elementList 將為空