オープンソースプロジェクトのHTML DOMは、一般的なDOM操作タスクを実行する100を超えるvanilla JavaScriptのスニペットを提供する。タスクの難易度は、些細なもの（要素のクラスを取得する）から高度なもの（サイズ変更可能な分割ビューを作成する）までさまざまである。このプロジェクトは、教育目的や、低レベルのDOM処理を自分で行う必要があるコンポーネント開発者にとって有益である。
プロジェクトの主要な貢献者であるPhuoc Nguyen氏は、プロジェクトの論理的根拠を説明した。
どのフレームワークでもWebコンポーネントを開発または使用する場合には、特定のレベルでDOMを操作する必要があります。
ブラウザのDOM APIとその使用方法を知ることは、Web開発において重要な役割を果たします。API、よく知られた問題、よくある質問を紹介するWebサイトは非常に有益です。
HTML DOMスニペットはネイティブブラウザのAPIのみを使用するため、外部ライブラリは必要ない。これは、World Wide Web Consortium（W3C）による、すべての最新ブラウザでのネイティブブラウザAPIの標準化によって実現されている。そして、Web Platform Incubator Community Group（WICG）やResponsive Issues Community Group（RICG）などのプラットフォームの革新的な機能について議論するブラウザベンダー間のコラボレーションによって実現されている。
HTML DOMスニペットは、推定される複雑さのレベルまたは必要な事前知識に応じて3つのカテゴリに分類される。基本的なタスクには、イベントハンドラーのアタッチまたはデタッチ、兄弟要素の取得、要素のCSSスタイルの更新がある。
中間タスクには、スクロールバーのサイズの計算、要素の最初のスクロール可能な親の取得、iframeとその親ウィンドウ間の通信、ファイルのダウンロード、テーブルからCSVへのエクスポート、CSSファイルの動的な読み込みなどがある。
高度なタスクには、サイズ変更可能な分割ビューの作成、ドラッグしてスクロールする操作、サイズ変更可能な要素の作成、ヘッダーをクリックしてテーブルを並べ替えるなどがある。
サイズ変更可能な要素の作成に関連するスニペットは、20行のCSS、7行のHTML、および30行をわずかに超えるJavaScriptで構成される。HTMLには、bottomとrightの境界ハンドルのdivが含まれている。CSSコードは、マウスがHTML要素のハンドル上にあるときにカーソルの変更を処理する。JavaScriptはインタラクションロジックを処理し、ユーザが1つのハンドルをドラッグしているかどうかに応じて、mousemoveリスナーを設定および削除する。最終アウトプットは次のとおりである。
部の開発者は、Hacker Newsに熱意を示している。ある開発者は次のように述べている。
整理されたリソースです。ブックマークしました。
SPAの時代ですが、どこにvanilla JSの適切なユースケースがあるでしょうか。ランディングページです。
- ほとんど静的なHTMLです。最初にレンダリングするまでの時間が重要です。必要なのは、少しの（徐々に追加される）センスだけです。
- 瞬時のロード/実行のためにインライン化できます。バンドルのダウンロード（またはSSR）は必要ありません。
- コードの量とスコープが小さいため、構造/スパゲッティは問題になりません。
- 残りのSPAバンドルから分離できます。そのため、出荷の変更はSPA CI/CDプロセスから完全に切り離され、何度でも_very_quicklyで実行できます。
別の開発者は、プロジェクトの教育的価値を強調した。
MDNドキュメントは、私の経験から、利用可能な最高のブラウザフロントエンドリファレンスです。
ただし、このサイトは別のニーズをカバーしています。ガイド/ハウツー指向のドキュメントです。これはよく必要とされるものです。
HTML DOMは、MITオープンソースライセンスの下で利用できる。コントリビューションとフィードバックは大歓迎であり、GitHubプロジェクトを介してお願いします。