1. 程式人生 > 實用技巧 >javascript: 一個可以代替jquery選擇器的方法

javascript: 一個可以代替jquery選擇器的方法

眾所周知,與原生js不同,jquery方法 $() 會得到一個jquery物件,而不是js物件。

  • 這個方法獲取的物件可以用來執行其他jquery方法處理業務邏輯;
  • 也可以通過下標獲取js DOM。
  • 當這個方法沒有匹配到DOM的時候,則物件裡面沒有DOM元素。
$("div span").click()

如果我不想用jquery選擇器呢?

先上程式碼。

function getElementArray (string) {
  var sel = document.querySelectorAll(string)
  var arr = new Array().slice.call(sel)
  
return arr }

解釋一下知識點:

  1. document.querySelectorAll(),這個方法可以通過選擇器獲取一個NodeList。關於NodeList:
    NodeList 不是一個數組,是一個類似陣列的物件(Like Array Object)。雖然 NodeList 不是一個數組,但是可以使用 forEach() 來迭代。你還可以使用 Array.from() 將其轉換為陣列。
  2. slice(),陣列原型方法,可從已有的陣列中返回包含選定的元素的新陣列。當沒有引數的時候,返回原元素的全部。
  3. call() ,函式原型方法。使用一個指定的 this 值和單獨給出的一個或多個引數來呼叫一個函式。換句話說,在修改其執行上下文的情況下呼叫一個函式

也就是說,

  • 我們傳入一個選擇器字串(Selected String);
  • 獲取包含指定DOM的NodeList:
  • 轉成 DOM 陣列並返回。

以上。