JavaScript 生態系統始終在不斷發展，是時候迎接未來的另一波浪潮了。
當 jQuery 以 document.querySelector() 和 document.querySelectorAll() 的形式融入瀏覽器時，我們都喜歡它。 DOM 方法使存取 DOM 變得更好。
最近，我的一些經驗實際上向我證明，同時使用 document.querySelector() 和 document.querySelectorAll() 是在固守遙遠的過去，而錯過了 Javascript 中的許多有趣的功能。
使用 document.querySelector() 和 document.querySelectorAll() 意味著您無法解構 DOM、一致地存取 DOM、簡化多重選擇並減少打字難度。現在，讓我們更深入地研究，以便您能夠意識到您已經錯過的一切。
但是等等！如果您不太了解 querySelector() 和 querySelectorAll() 是什麼，並且想了解更多資訊；請參閱下面的影片教學：JavaScript DOM 操作
document.querySelector() 和 document.querySelectorAll() 在選擇 DOM 方面不一致。一個選擇目標選擇器的第一個實例，另一個選擇目標選擇器的所有實例。這意味著一個用於選擇單一元素，另一個用於選擇一組元素。
所以你不能互換使用兩者。您必須根據您想要選擇的內容不斷從一種切換到另一種。
// Select the first element of the class .post
const post = document.querySelector('.post');
// Select all elements of the class .post
const posts = document.querySelectorAll('.post');
現在，讓我向您展示一種更好的方法。我剛剛建立了一個名為 koras.jsx 的 UI 庫，它帶有 $select()
它可以用來取代 JavaScript 中的 document.querySelector() 和 document.querySelectorAll()，以下是如何使用它。
//select all instances of class .post
const posts = $select('.post');
//select the first instance of class post
const firstPost = $select('.post[0]');
//Doing the same with querySelector
const posts = document.querySelectorAll('.post');
const firstPost = posts[0];
那有多酷？它僅適用於 document.querySelector() 和 document.querySelectorAll() 的用例。
您可以在任意位置的分組元素中選擇一個元素。
//select 6th instance of class post
$select('.post[5]')
//select 7th instance of div elements
$select('div[6]')
您可以使用 $select() 刪除元素，例如：
//Delete only the instance of .post with index is equal to 2
$select('.post[delete|i=2]');
//delete all instances of .post with index greater than 2
$select('.post[delete|i>2]');
您可以使用 $select() 為元素新增屬性，例如：
$select('.post[add|class=hidden]');
$select('.post[add|style=1px solid red]');
$select('.post[add|id=2]');
$select('.post[add|class=flex bold]')
您可以使用 $select() 從元素中刪除屬性，例如：
$select('.post[remove|class=hidden]');
$select('.post[remove|id]');
$select('.post[remove|class=flex bold]')
$select('.post[remove|style]');
DOM 解構是 es6 中提供的功能之一，但您會驚訝於無法解構使用 document.querySelector() 和 document.querySelectorAll() 選擇的元素。
// Select the first element of the class .post
const post = document.querySelector('.post');
// Select all elements of the class .post
const posts = document.querySelectorAll('.post');
//select all instances of class .post
const posts = $select('.post');
//select the first instance of class post
const firstPost = $select('.post[0]');
//Doing the same with querySelector
const posts = document.querySelectorAll('.post');
const firstPost = posts[0];
你看得到嗎？ document.querySelectAll() 不支援 DOM 解構。這意味著您錯過了解構 DOM 的機會。不！這一點都不酷，所以你必須開始使用 $select()。
使用 document.querySelect() 或 document.querySelectorAll() 會迫使您不必要地重複它們，因為它們不支援 DOM 解構，這使得維護 JavaScript 程式碼有點混亂。
//select 6th instance of class post
$select('.post[5]')
//select 7th instance of div elements
$select('div[6]')
//Delete only the instance of .post with index is equal to 2
$select('.post[delete|i=2]');
//delete all instances of .post with index greater than 2
$select('.post[delete|i>2]');
您看得出來這是多麼重複嗎？以及它會讓大規模維護程式碼庫變得有點混亂嗎？
看，您可以使用 $select() 輕鬆執行相同的操作，如下所示：
$select('.post[add|class=hidden]');
$select('.post[add|style=1px solid red]');
$select('.post[add|id=2]');
$select('.post[add|class=flex bold]')
與 $select() 相比，使用 document.querySelector() 往往會建立更多隱藏的 bug 區域，因為它支援 DOM 解構和多重選擇。
$select('.post[remove|class=hidden]');
$select('.post[remove|id]');
$select('.post[remove|class=flex bold]')
$select('.post[remove|style]');
$select() 減少了寫入選擇元素的程式碼行數，從而減少了隱藏錯誤的表面積。這意味著使用 $select() 時更有可能相對更快地發現錯誤。
使用querySelector選擇的元素只能與forEach一起使用，而不能與map()、filter()和co一起使用。
$select() 預設適用於所有陣列方法，與 document.querySelectorAll() 不同，後者需要一些解決方法，可能會導致大規模不必要的重複和複雜性。
可維護性始終圍繞著易用性、簡潔性和一致性。任何簡潔、一致或易於使用的程式碼庫往往都是可維護的。維護重複且冗長的程式碼很麻煩，因為您有更多的表面區域需要查看，尤其是在修復錯誤或建置功能時。
經驗法則是盡可能減少 JavaScript，$select() 使其在處理 DOM 選擇時變得可行。 $select() 在規模上優於 document.querySelector() 和 document.querySelectorAll()，因為它更簡潔且重複性更少。選擇的元素越多，使用 $select() 重複選擇的次數就越少。
你不能將 $select() 產生的元素數組附加到另一個元素，例如 element.append(arrayGenerateBy$Select)，因為 DOM 需要 NodeList。
不過，你可以透過將 false 作為第二個參數傳遞給 $select() 來停用其所有超能力。
const [posts, comments] = document.querySelectorAll('.post, .comment');
現在，它將傳回一個可追加且可前置的普通 DOM NodeList[]。
您可能好奇 $select() 是否可以執行 document.querySelect() 或 document.querySelectorAll() 可以執行的所有操作。是的！他們能做的事它都能做。 $select() 可以完成這一切。它可以使用 tagor css 選擇器並執行 query.querySelector() 可以執行的所有其他操作。
可以聲稱 querySelector() 或 querySelectorAll() 比 $select() 更快，平均大約 一毫秒 但 $select() 贏回了它規模化的興趣。
你仍然需要學習使用querySelector，因為了解如何使用它讓你有機會在它上面建立一些有用的東西，就像$select()一樣。我能夠建構 $select() 因為我真正理解它是如何運作的。
我已經製作了一個教學。看看下面：JavaScript DOM 操作
透過支援 DOM 解構和啟用基於陣列的選擇，$select() 被證明是對我的工具包的一個有價值的補充。它不僅增強了程式碼的可讀性，而且還最大限度地減少了錯誤的出現範圍，使偵錯過程變得更加簡單。
為了追求可維護性、簡潔性和一致性，$select() 成為 DOM 選擇的一個引人注目的選擇，這表明 JavaScript 開發的發展向前邁出了一步。
隨著我們不斷適應不斷發展的 JavaScript 生態系統，採用 $select() 這樣的工具可確保我們持續使程式碼更加簡潔、可讀且可維護。
以上是為什麼我不會再使用 querySelector。的詳細內容。更多資訊請關注PHP中文網其他相關文章！
