核心要點

• NodeList.js 作為 jQuery 的 DOM 操作替代方案，提供類似的功能，但體積更小（壓縮後 4k），並利用了原生瀏覽器 API 的改進(jìn)。

• 與 jQuery 不同，NodeList.js 將節(jié)點數(shù)組視為單個節(jié)點，從而實現(xiàn)更簡潔的代碼和更輕鬆的 NodeList 對像操作。

• NodeList.js 包含用於設(shè)置和獲取屬性、調(diào)用特定於元素的方法以及訪問 NodeList 中節(jié)點的特殊方法，以及等同於 jQuery 的 prevObject 屬性的 owner 屬性。

• NodeList.js 與特定版本以後的主流瀏覽器兼容（Firefox 6 、Safari 5.0.5 、Chrome 6 、IE 9 、Opera 11.6 ），並自動更新以包含瀏覽器新增的方法/屬性。

  p.tip { background-color: rgba(128,128,128,0.05); border-top-right-radius: 5px; border-bottom-right-radius: 5px; padding: 15px 20px; border-left: 10px solid rgba(128,128,128,0.075); }

近年來，jQuery 已成為 Web 上事實上的 JavaScript 庫。它消除了許多跨瀏覽器的不一致性，並為客戶端腳本添加了一層受歡迎的語法糖。它抽象化處理的主要痛點之一是 DOM 操作，但自 jQuery 問世以來，原生瀏覽器 API 已得到顯著改進(jìn)，“你可能不需要 jQuery” 的理念開始流行起來。

原因如下：

1. jQuery 包含許多您不需要或不使用的功能（因此其體積不必要地龐大）。
2. jQuery 對太多人來說承擔(dān)了太多功能。通常，較小的庫可以更好地完成某些任務(wù)。
3. 就 DOM 操作而言，瀏覽器 API 現(xiàn)在可以完成 jQuery 大部分的功能。
4. 瀏覽器 API 現(xiàn)在更加同步，例如使用 addEventListener 代替 attachEvent。

問題何在？

問題在於，與 jQuery 相比，使用原生（或純）JavaScript 進(jìn)行 DOM 操作可能很麻煩。這是因為您必須編寫更多冗餘代碼，並處理瀏覽器無用的 NodeList。

首先，讓我們看看 MDN 對 NodeList 的定義：

NodeList 對像是節(jié)點的集合，例如 Node.childNodes 和 document.querySelectorAll 方法返回的那些節(jié)點。

有時還存在動態(tài) NodeList（這可能會令人困惑）：

在某些情況下，NodeList 是動態(tài)集合，這意味著 DOM 中的更改會反映在集合中。例如，Node.childNodes 是動態(tài)的。

這可能是一個問題，因為您無法分辨哪些是動態(tài)的，哪些是靜態(tài)的。除非您從 NodeList 中移除每個節(jié)點，然後檢查 NodeList 是否為空。如果為空，則表示您擁有一個動態(tài) NodeList（這只是一個壞主意）。

此外，瀏覽器沒有提供任何有用的方法來操作這些 NodeList 對象。

例如，不幸的是，無法使用 forEach 循環(huán)遍歷節(jié)點：

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 錯誤：nodes.forEach 不是函數(shù)

因此，您必須執(zhí)行以下操作：

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

或者甚至只能使用“hack”：

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

瀏覽器的原生 NodeList 只有一個方法：item。它通過索引從 NodeList 返回一個節(jié)點。當(dāng)我們可以像使用數(shù)組一樣訪問該節(jié)點（使用 array[index]）時，它完全沒用：

var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true

這就是 NodeList.js 的用武之地——使使用瀏覽器原生 API 操作 DOM 變得像使用 jQuery 一樣容易，但僅需 4k 壓縮大小。

解決方案

我創(chuàng)建 NodeList.js 是因為我一直使用原生 DOM API，但希望使它們更簡潔，從而減少編寫代碼時的許多冗餘（例如 for 循環(huán)）。

NodeList.js 是原生 DOM API 的一個包裝器，它允許您操作節(jié)點數(shù)組（即我的 NodeList），就好像它是一個單個節(jié)點一樣。這為您提供了比瀏覽器原生 NodeList 對象更多的功能。

如果您覺得這不錯，請從官方 GitHub 存儲庫獲取 NodeList.js 的副本，並繼續(xù)閱讀本教程的其餘部分。

用法：

選擇 DOM 節(jié)點很簡單：

此方法在後臺使用 querySelectorAll(selector)。

但它與 jQuery 相比如何？

很高興您提出這個問題。讓我們將原生 JS、jQuery 和 NodeList.js 進(jìn)行比較。

假設(shè)我們有三個按鈕：

讓我們將每個按鈕的文本更改為“點擊我”：

原生 JS：

var buttons = document.querySelectorAll('button'); // 返回瀏覽器無用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].textContent = 'Click Me';
}

jQuery：

$('button').text('Click Me');

NodeList.js：

$$('button').textContent = 'Click Me';

在這裡，我們看到 NodeList.js 可以有效地將 NodeList 視為單個節(jié)點。也就是說，我們引用了一個 NodeList，並將它的 textContent 屬性設(shè)置為“點擊我”。然後，NodeList.js 將對 NodeList 中的每個節(jié)點執(zhí)行此操作。很巧妙，對吧？

如果我們想要方法鏈（類似於 jQuery），我們會執(zhí)行以下操作，這將返回對 NodeList 的引用：

$$('button').set('textContent', 'Click Me');

現(xiàn)在，讓我們向每個按鈕添加一個點擊事件監(jiān)聽器：

原生 JS：

var buttons = document.querySelectorAll('button'); // 返回瀏覽器無用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    this.classList.add('clicked');
  });
}

jQuery：

$('button').on('click', function() {
  $(this).addClass('click');
  // 或?qū)?jQuery 與原生混合使用 `classList`：
  this.classList.add('clicked');
});

NodeList.js：

$$('button').addEventListener('click', function() {
  this.classList.add('clicked');
});

好的，所以 jQuery 的 on 方法相當(dāng)不錯。我的庫使用瀏覽器的原生 DOM API（因此是 addEventListener），但這並不會阻止我們?yōu)樵摲椒▌?chuàng)建別名：

$$.NL.on = $$.NL.addEventListener;

$$('button').on('click', function() {
  this.classList.add('clicked');
});

不錯！這演示了我們添加自己方法的方式：

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 錯誤：nodes.forEach 不是函數(shù)

NodeList.js 對數(shù)組方法的支持

NodeList.js 確實繼承自 Array.prototype，但不是直接繼承，因為某些方法已更改，因此使用它們與 NodeList（節(jié)點數(shù)組）一起使用是有意義的。

push 和 unshift

例如：push 和 unshift 方法只能將節(jié)點作為參數(shù)，否則會拋出錯誤：

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

因此，push 和unshift 都返回NodeList 以允許方法鏈，這意味著它與JavaScript 的原生Array#push 或Array#unshift 方法不同，後者接受任何內(nèi)容並返回數(shù)組的新長度。如果我們確實想要 NodeList 的長度，我們只需使用 length 屬性。

這兩個方法，就像 JavaScript 的原生數(shù)組方法一樣，都會更改 NodeList。

concat

concat 方法將接受以下內(nèi)容作為參數(shù)：

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

concat 是一個遞歸方法，因此這些數(shù)組可以像我們希望的那樣深，並且會被展平。但是，如果傳遞的數(shù)組中的任何元素不是節(jié)點、NodeList 或 HTMLCollection，它將拋出錯誤。

concat 返回一個新的 NodeList，就像 javascript 的 Array#concat 方法一樣。

pop、shift、map、slice、filter

pop 和 shift 方法都可以採用可選參數(shù)，說明要從 NodeList 中彈出或移位多少個節(jié)點。與 JavaScript 的原生 Array#pop 或 Array#shift 不同，後者總是彈出或移位數(shù)組中的一個元素，而不管傳遞什麼作為參數(shù)。

如果每個映射值都是一個節(jié)點，map 方法將返回一個 NodeList；如果不是，則返回映射值的數(shù)組。

slice 和 filter 方法的作用與在真實數(shù)組中的作用一樣，但會返回一個 NodeList。

由於 NodeList.js 沒有直接繼承自 Array.prototype，因此如果在加載 NodeList.js 後向 Array.prototype 添加方法，則不會繼承該方法。

您可以在此處查看 NodeList.js 的其餘數(shù)組方法。

特殊方法

NodeList.js 有四個獨特的方法，以及一個名為 owner 的屬性，它等同於 jQuery 的 prevObject 屬性。

get 和 set 方法：

某些元素具有特定於該類型元素的屬性（例如，錨標(biāo)記上的 href 屬性）。這就是為什麼 $$('a').href 將返回未定義的原因——因為它不是 NodeList 中每個元素都繼承的屬性。這就是我們?nèi)绾问褂?get 方法訪問這些屬性的方法：

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 錯誤：nodes.forEach 不是函數(shù)

set 方法可用於為每個元素設(shè)置這些屬性：

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

set 還返回 NodeList 以允許方法鏈。我們可以在 textContent 等方面使用它（兩者都等效）：

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

我們還可以在一次調(diào)用中設(shè)置多個屬性：

var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true

以上所有操作都可以使用任意屬性完成，例如 style：

var buttons = document.querySelectorAll('button'); // 返回瀏覽器無用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].textContent = 'Click Me';
}

call 方法

call 方法允許您調(diào)用特定於元素的方法（例如，視頻元素上的 pause）：

$('button').text('Click Me');

item 方法

item 方法等同於 jQuery 的 eq 方法。它返回一個 NodeList，其中只包含傳遞索引的節(jié)點：

$$('button').textContent = 'Click Me';

owner 屬性

owner 屬性等同於 jQuery 的 prevObject。

$$('button').set('textContent', 'Click Me');

btns.style 返回樣式數(shù)組，而 owner 將返回 style 所映射的 NodeList。

NodeList.js 兼容性

我的庫與所有主要的新瀏覽器兼容，如下所述。

瀏覽器版本FireFox6 Safari5.0.5 Chrome6 IE9 Opera11.6

結(jié)論

現(xiàn)在我們終於可以使用有用的 NodeList 對象了！

對於大約 4k 的壓縮大小，您可以獲得上述所有功能以及更多功能，您可以在 NodeList.js 的 GitHub 存儲庫中了解所有這些功能。

由於 NodeList.js 使用瀏覽器作為依賴項，因此無需進(jìn)行任何升級。每當(dāng)瀏覽器向 DOM 元素添加新方法/屬性時，您都可以通過 NodeList.js 自動使用這些方法/屬性。所有這一切都意味著您唯一需要擔(dān)心的棄用是瀏覽器刪除的方法。這些通常是使用率非常低的方法，因為我們不能破壞 Web。

那麼您怎麼看？您會考慮使用這個庫嗎？是否缺少任何重要功能？我很樂意在下面的評論中聽到您的意見。

關(guān)於使用 NodeList.js 進(jìn)行 DOM 操作的常見問題

NodeList 和 HTMLCollection 有什麼區(qū)別？

NodeList 和 HTMLCollection 都是節(jié)點集合。它們之間的主要區(qū)別在於 NodeList 可以包含任何節(jié)點類型，而 HTMLCollection 是元素節(jié)點的集合。 HTMLCollection 也是動態(tài)的，這意味著當(dāng)文檔結(jié)構(gòu)發(fā)生更改時，它會自動更新。另一方面，NodeList 是靜態(tài)的，不會更新以反映文檔中的更改。

如何將 NodeList 轉(zhuǎn)換為數(shù)組？

您可以使用 Array.from() 方法或展開運算符將 NodeList 轉(zhuǎn)換為數(shù)組。以下是如何操作：

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 錯誤：nodes.forEach 不是函數(shù)

為什麼 jQuery 選擇器返回 prevObject 而不是普通元素？

jQuery 的鍊式機(jī)制通過在進(jìn)行更改之前存儲之前的對象來工作。這允許您使用 .end() 方法恢復(fù)到之前的狀態(tài)。如果您想獲取實際的 DOM 元素，可以使用 .get() 方法或數(shù)組表示法。

如何循環(huán)遍歷 NodeList？

您可以使用 for 循環(huán)、for...of 循環(huán)或 forEach() 方法循環(huán)遍歷 NodeList。這是一個使用 for 循環(huán)的示例：

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

jQuery 中 .prev() 方法有什麼用？

jQuery 中的 .prev() 方法用於選擇所選元素的緊鄰前一個同級元素。如果提供了選擇器，則只有在匹配該選擇器時才會檢索前一個同級元素。

jQuery 在 2022 年仍然相關(guān)嗎？

雖然 jQuery 在發(fā)佈時是一個改變遊戲規(guī)則的東西，但現(xiàn)代 JavaScript 生態(tài)系統(tǒng)已經(jīng)發(fā)生了顯著變化。許多使 jQuery 受歡迎的功能現(xiàn)在都內(nèi)置於 JavaScript 本身。但是，jQuery 仍然被廣泛使用和維護(hù)，它可能是某些項目的良好選擇。

如何從 NodeList 中選擇特定節(jié)點？

您可以使用數(shù)組表示法或 item() 方法從 NodeList 中選擇特定節(jié)點。以下是如何操作：

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

我可以在 NodeList 上使用 map、filter 和 reduce 方法嗎？

NodeList 不是數(shù)組，因此它沒有像 map、filter 和 reduce 這樣的方法。但是，您可以將 NodeList 轉(zhuǎn)換為數(shù)組，然後使用這些方法。

querySelector 和 querySelectorAll 有什麼區(qū)別？

querySelector 返回文檔中與指定的 CSS 選擇器匹配的第一個元素，而 querySelectorAll 返回與 CSS 選擇器匹配的所有元素的 NodeList。

如何檢查 NodeList 是否為空？

您可以通過檢查其 length 屬性來檢查 NodeList 是否為空。如果長度為 0，則 NodeList 為空。以下是如何操作：

var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true

以上是失去jQuery膨脹的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！