要素の選択

Cheerio を使用すると、CSS セレクタを使用して HTML ドキュメントから要素を選択できます。これにより、タグ名、クラス名、属性値などの基準に基づいて要素を選択できます。このガイドでは、CSS セレクタを使用して要素を取得する方法の概要を説明します。

Cheerio で要素を選択するには、まずライブラリをインポートしてドキュメントを読み込む必要があります。例:

import * as cheerio from 'cheerio';

// Load the document using any of the methods described in the "Loading Documents" section.
const $ = cheerio.load('<html>...</html>');

ドキュメントを読み込んだら、$ 関数を使用して要素を選択できます。$ 関数は jQuery の $ 関数と同様に機能し、タグ名、クラス名、属性値に基づいて要素を選択できます。

$ 関数を使用して要素を選択する方法の例をいくつか示します。

ドキュメント内のすべての <p> 要素を選択するには

const $p = $('p');

ヒント

Cheerio では、変数名に $ をプレフィックスとして付けることで、Cheerio オブジェクトが含まれていることを示すのが慣例です。これは必須ではありませんが、推奨される方法です。

特定のクラス名を持つ要素を選択するには

const $selected = $('.selected');

特定の属性値を持つ要素を選択するには

const $selected = $('[data-selected=true]');

XML 名前空間

XML 名前空間を使用して選択できますが、CSS 仕様により、セレクタを有効にするにはコロン (:) をエスケープする必要があります。

$('[xml\\:id="main"');

複数の条件に一致する要素を選択するには、セレクタを組み合わせることができます。たとえば、クラス selected を持つすべての <p> 要素を選択するには

const $selected = $('p.selected');

さらに、スペース ( ) を使用して、他の要素の子孫である要素を選択できます。たとえば、<div> 要素の子孫であるすべての <p> 要素を選択するには

const $p = $('div p');

> 文字を使用して、他の要素の直接の子孫である要素を選択することもできます。たとえば、<div> 要素の直接の子孫であるすべての <p> 要素を選択するには

const $p = $('div > p');

サポートされているすべてのセレクタの一覧については、Cheerio の基盤となる CSS セレクタライブラリ css-select のドキュメントを参照してください。サポートされているセレクタの一覧はこちら。たとえば、「hello」という単語を含む <p> 要素を選択するには

const $p = $('p:contains("hello")');

Cheerio は、ドキュメント内での位置に基づいて要素を選択できるいくつかの jQuery 固有の拡張機能もサポートしています。たとえば、ドキュメント内の最初の <p> 要素を選択するには

const $p = $('p:first');

これらの拡張機能を実装するライブラリである cheerio-select を参照して、利用可能な機能を確認してください。

詳細については、jQuery の要素選択に関するガイド要素の選択と MDN も参照してください。

最後に、カスタム CSS擬似クラスを追加するには、Cheerio の拡張ガイドを参照してください。