< p>JavaScript 屬性選擇器是一種可以根據元素的屬性值進行選擇的技術。與 CSS 屬性選擇器相似， JavaScript 屬性選擇器允許開發人員更加靈活地獲取 HTML 元素，有助于更好地掌控網頁的樣式和行為。今天，我們將深入探討 JavaScript 屬性選擇器的用法。

屬性選擇器的語法非常簡單。在 JavaScript 中，我們可以使用方括號 ([]) 來選擇帶有特定屬性的元素。在方括號中添加要匹配的屬性名稱，以及可選的屬性值。下面是一個簡單的例子：

//選擇所有帶有 data-id 屬性的元素
document.querySelectorAll("[data-id]");
//選擇 data-id 屬性值為 "123" 的元素
document.querySelectorAll("[data-id='123']");

如上所示，使用屬性選擇器可以選擇帶有 data-id 屬性的所有元素，或者帶有 data-id 屬性且屬性值為 "123" 的元素。

在某些情況下，我們需要選擇具有多個屬性的元素。在這種情況下，你可以使用逗號來分隔屬性選擇器。下面是一個例子：

//選擇帶有 data-id 和 data-name 屬性的元素
document.querySelectorAll("[data-id],[data-name]");

如上所示，將屬性選擇器放入逗號分隔的列表中，以選擇所有具有 data-id 或 data-name 屬性的元素。

另一種常見的用法是通過屬性選擇器選擇某些屬性值以特定值開頭、結束或包含在內的元素。下面是一些例子：

//選擇 href 屬性以 "http" 開頭的元素
document.querySelectorAll("[href^='http']");
//選擇 src 屬性以 ".jpg" 結尾的 img 標簽
document.querySelectorAll("img[src$='.jpg']");
//選擇 class 屬性包含 "active" 的元素
document.querySelectorAll("[class*='active']");

如上所示，使用 ^、$ 和 * 運算符可以選擇帶有特定屬性值的元素，從而使屬性選擇器更具靈活性和可配置性。

最后，我們可以根據屬性存在與否來選擇元素。下面是例子：

//選擇帶有 data-id 屬性的元素
document.querySelectorAll("[data-id]");
//選擇沒有 class 屬性的元素
document.querySelectorAll(":not([class])");

如上所示，在方括號內添加 :not 偽類選擇器，可以選擇特定屬性不存在的元素。

總之，JavaScript 屬性選擇器是一項非常強大的選擇技術，允許通過元素的屬性值來選擇 HTML 元素。通過多個簡單的示例，我們已經將其用法學得更加透徹。無論您是前端開發學徒還是經驗豐富的開發人員，都可以使用 JavaScript 屬性選擇器來提高您的實踐技能。