開源項目HTML DOM提供了100多個vanilla JavaScript（vanilla JS是一個所謂的JavaScript框架，但實際上指的就是原生的JavaScript，這是一種調侃和惡作劇的說法，參見vanilla-js站點和stackoverflow上的討論——譯者注）代碼片段，用於執行常見的DOM操作任務。這些任務的難度從簡單（獲取某個元素的class）到高級（創建可調整大小的切分視圖）不等。這個項目可以用於教育學習，也適用於需要自行操作底層DOM的組件開發人員。
該項目的核心貢獻者Phuoc Nguyen闡述了項目的基本原理和意圖：
如果你在任意框架中開發或使用Web組件的話，那麼必須要在一定程度上使用DOM。
在Web開發中，瞭解瀏覽器的DOM API以及如何使用它們是非常重要的。如果有一個Web站點將這些API、衆所周知的問題以及最流行的疑問彙總起來，那麼它將是非常有用的。
HTML DOM片段只使用了原生瀏覽器的API，所以不需要任何外部的庫。它們通過由萬維網聯盟（World Wide Web Consortium，W3C）（W3C）所標準化的每個現代瀏覽器的都支持原生瀏覽器API來實現，除此之外，瀏覽器廠商還會與一些平臺，如Web平臺孵化器社區羣組（Web Platform Incubator Community Group，WICG）或響應式問題社區羣組（Responsive Issues Community Group，RICG），討論創新性的特性。
HTML DOM的代碼片段根據估計的複雜性和所需的先驗知識分成了三個類別。基礎任務包括附加或解除事件處理器、檢索元素的兄弟節點以及更新元素的CSS樣式等。
中級任務包括計算滾動條的大小、獲取元素的第一個可滾動父元素、
iframe與其父窗口之間進行通信、下載文件、導出表格到CSV或者動態加載CSS文件等等。
高級任務包括創建可調整大小的切分視圖、拖拽-滾動交互、創建可調整大小的元素以及通過單擊表頭對錶進行排序等等。
創建可調整大小的元素相關的代碼片段由20行CSS、7行HTML和30多行JavaScript組成。HTML包括用於顯示底部和右側邊框的div。當鼠標位於HTML元素的句柄上時，CSS代碼會更改光標的樣式。JavaScript處理交互邏輯，包括根據用戶是否拖動句柄來設置和刪除mousemove監聽器。最終結果如下所示：
有些開發人員在Hacker News上表達了他們對該項目的熱情。有位開發人員這樣說到：
非常整潔的資源，我已經收藏了。
在SPA時代，vanilla JS在哪些地方依然有用武之地呢？
- 大部分都是靜態HTML，首次渲染的時間非常重要，我們只需要有一點點（可能會逐漸增加）天分就夠了。
- 可以內聯即時加載/執行，不需要捆綁下載(或SSR)。
- 代碼的容量和作用域都有限，所以出現結構/意大利麪的問題也不是什麼事兒。
- 你可以把它從SPA包中分離出來，所以交付變更能夠完全從SPA CI/CD過程中解耦出來，可以根據你的喜好頻繁地交付，而且速度非常快。
另外一位開發人員強調了該項目在教育學習方面的價值：
根據我的經驗，MDN文檔是最好的瀏覽器前端參考。
但是，這個站點滿足了一個不同的需求：提供了一個面向指南/如何實現的文檔，這通常是我們所需要的。
HTML DOM可以基於MIT開源許可證使用。歡迎通過GitHub項目提交貢獻和反饋。
原文鏈接：
108 Common DOM Tasks in Vanilla JS: the HTML DOM Project