通过 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 将为空