jsdom

ブラウザなしでHTMLを「 DOM 」として扱えるようにするツールです。

jsdom をインストールするには、以下のようにします。

npm i jsdom

文字列の HTML をスクレイピングするには、以下のようにします。

const { JSDOM } = require('jsdom');

const body = `<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>
<img id="hoge" src="sample1.jpg" alt="">
<img src="img.png">
</body>
</html>`

const dom = new JSDOM(body);
dom.window.document.querySelectorAll("img").forEach((a) => {
  console.log(a.src)
})

jsdom と Puppeteer の違い

特徴 / 項目	jsdom (JSDOM)	Puppeteer (パペティア)
種類	Node.jsライブラリ	Node.jsライブラリ
目的	Node.js上でブラウザのDOM環境をエミュレートする	実際のChromium/Chromeブラウザをプログラムから制御する
基盤	純粋なJavaScriptで書かれたDOM実装	Chrome DevTools Protocol を介した実際のブラウザ操作
実行環境	Node.jsプロセス内	実際のブラウザプロセスを起動（ヘッドレスまたはGUIあり）
重さ/速度	軽量で高速	比較的重く、起動に時間がかかる
レンダリング	HTML/CSSのレンダリングは行わない（DOMツリーの構築のみ）	実際のブラウザが完全なレンダリングを行う（CSS適用、画像表示など）
JavaScript実行	HTML内の`<script>`タグのJSを実行可能（ただし、完全なブラウザAPIは利用不可）	実際のブラウザのJavaScriptエンジンで実行（全てのブラウザAPIが利用可能）
ネットワーク	基本的にネットワークリクエストをエミュレートしない（設定で一部可能）	実際のブラウザがネットワークリクエストを行う（画像、CSS、JSの読み込みなど）
ユーザー操作のシミュレーション	できない	可能（クリック、入力、スクロール、ホバーなど）
用途	Webスクレイピング (JSが少ない/DOM構造解析がメインの場合) フロントエンドコンポーネントの単体テストサーバーサイドでのHTML操作/解析	Webスクレイピング (JSで動的に生成されるコンテンツ、複雑な操作が必要な場合) E2Eテスト (Webアプリの実際の動作検証) 画面キャプチャ / PDF生成 Webパフォーマンス測定自動化（複雑なログイン、フォーム入力など）
得意なこと	軽量な環境でのDOM操作 JavaScriptコードの高速な実行（DOM操作関連）テストフレームワークとの統合	複雑なブラウザ操作の自動化最新のWeb技術への対応実際のユーザー体験のシミュレーション
苦手なこと	複雑なCSSの解釈や描画画像や動画の処理ユーザーイベントのシミュレーション実際のブラウザの挙動再現	起動と実行にリソースと時間がかかるシンプルなDOM操作にはオーバーヘッドが大きい

node-html-parser

node-html-parser のインストールするには、以下のようにします。

npm i node-html-parser

文字列の HTML をスクレイピングするには、以下のようにします。

var HTMLParser = require('node-html-parser');

const body = `<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>認証した場合のみ画像表示</title>
</head>
<body>
<img id="hoge" src="before_sample.jpg" alt="">
<img src="img.png">
</body>
</html>`

const dom = HTMLParser.parse(body);
dom.querySelectorAll("img").forEach((a) => {
  a.setAttribute('src', 'after_sample.png')
})

// 変更後のHTMLを取得
console.log(dom.toString())