如何使用 JavaScript 通過 CSS 選擇器選擇元素

JavaScript 提供了兩種方法，querySelector() 和 querySelectorAll() , 根據 CSS 選擇器選擇 DOM 元素。 CSS 選擇器是從文檔中選擇 HTML 元素的一種非常簡單但功能強大的方法。

querySelector() 方法將 CSS 選擇器作為輸入並返回 第一個元素 匹配給定的選擇器。如果沒有元素匹配，則返回 null .這是一個選擇第一個 <button> 的示例文檔中的元素：

const p = document.querySelector('p');

// Get paragraph text
console.log(p.innerText);

querySelectorAll() 方法將 CSS 選擇器作為輸入並返回 DOM 元素列表 ，基本上是一個 NodeList，與給定的 CSS 選擇器匹配。如果沒有找到匹配項，則返回一個空列表。

這是一個選擇所有 <div> 的示例包含 active 的元素 CSS類：

const divs = document.querySelectorAll('div.active');

// iterate over elements
divs.forEach((div, index) => {
    div.style.color = 'red';
});

在上面的例子中，我們使用了 forEach() 循環來遍歷 NodeList 的元素 .查看本指南以了解有關在 JavaScript 中循環 DOM 元素的更多信息。

您還可以指定多個 CSS 選擇器 querySelectorAll() 以逗號分隔，就像 jQuery 的 $(...) 方法：

// select all <div> tags with the `active` class + all <p> tags
const elems = document.querySelectorAll('div.active, p');

這兩種方法都適用於直到 Internet Explorer 8 的所有現代和舊瀏覽器。查看如何選擇 DOM 元素指南，了解更多關於在 JavaScript 中提取 DOM 元素的不同方法。

$.cookie 不是函數