本文へスキップ

DOM のトラバース

Cheerio を使用したドキュメントのトラバースにより、ドキュメント内の特定の要素を選択および操作できます。DOM ツリーの上下移動、ツリー内での横方向の移動、特定の基準に基づいた要素のフィルタリングなど、Cheerio はこれらを実現するためのさまざまなメソッドを提供します。

このガイドでは、Cheerio で要素をトラバースおよびフィルタリングするために使用できるさまざまなメソッドについて説明します。DOM ツリーの下方向への移動、上方向への移動、ツリー内での横方向の移動、要素のフィルタリングの方法について説明します。このガイドの最後までに、Cheerio を使用してドキュメント内の要素を選択および操作する方法を十分に理解できるようになります。

ヒント

このガイドは、Cheerio で要素をトラバースおよびフィルタリングするために使用できるさまざまなメソッドの概要を示すことを目的としています。これらのメソッドの詳細については、API ドキュメントを参照してください。

DOM ツリーの下方向への移動​

Cheerio は、DOM ツリーを下方向に移動し、現在の選択の子または子孫である要素を選択するためのいくつかのメソッドを提供します。

find​

find メソッドを使用すると、選択範囲内の特定の要素を見つけることができます。CSS セレクターを引数として受け取り、現在の選択範囲内のセレクターに一致するすべての要素を含む新しい選択範囲を返します。

<ul> 要素内のすべての <li> 要素を選択するために find を使用した例を以下に示します。

ライブエディター
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>`,
);

const listItems = $('ul').find('li');
render(<>List item count: {listItems.length}</>);
結果
読み込み中…

children​

children メソッドを使用すると、要素の直接の子を選択できます。現在の選択範囲のすべての直接の子を含む新しい選択範囲を返します。

<ul> 要素内のすべての <li> 要素を選択するために children を使用した例を以下に示します。

ライブエディター
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>`,
);

const listItems = $('ul').children('li');
render(<>List item count: {listItems.length}</>);
結果
読み込み中…

contents​

contents メソッドを使用すると、テキストノードやコメントノードを含む、要素のすべての子を選択できます。現在の選択範囲のすべての子を含む新しい選択範囲を返します。

<div> 要素のすべての子を選択するために contents を使用した例を以下に示します。

ライブエディター
const $ = cheerio.load(
  `<div>
    Text <p>Paragraph</p>
  </div>`,
);

const contents = $('div').contents();
render(<>Contents count: {contents.length}</>);
結果
読み込み中…

DOM ツリーの上方向への移動​

Cheerio は、DOM ツリーを上方向に移動し、現在の選択の祖先である要素を選択するためのいくつかのメソッドを提供します。

parent​

parent メソッドを使用すると、選択範囲の親要素を選択できます。現在の選択範囲の各要素の親要素を含む新しい選択範囲を返します。

<li> 要素の親 <ul> 要素を選択するために parent を使用した例を以下に示します。

ライブエディター
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
  </ul>`,
);

const list = $('li').parent();
render(<>{list.prop('tagName')}</>);
結果
読み込み中…

parents と parentsUntil​

parents メソッドを使用すると、ルート要素までの選択範囲のすべての祖先要素を選択できます。現在の選択範囲のすべての祖先要素を含む新しい選択範囲を返します。

parentsUntil メソッドは parents と似ていますが、停止点として祖先要素を指定できます。指定された祖先まで（ただし、指定された祖先を含まない）の現在の選択範囲のすべての祖先要素を含む新しい選択範囲を返します。

<li> 要素の祖先要素を選択するために parents と parentsUntil を使用した例を以下に示します。

ライブエディター
const $ = cheerio.load(
  `<div>
    <ul>
      <li>Item 1</li>
    </ul>
  </div>`,
);

const ancestors = $('li').parents();
const ancestorsUntil = $('li').parentsUntil('div');

render(
  <>
    <p>
      Ancestor count (also includes "body" and "html" tags): {ancestors.length}
    </p>
    <p>Ancestor count (until "div"): {ancestorsUntil.length}</p>
  </>,
);
結果
読み込み中…

closest​

closest メソッドを使用すると、指定されたセレクターに一致する最も近い祖先を選択できます。セレクターに一致する最も近い祖先要素を含む新しい選択範囲を返します。一致する祖先が見つからない場合、メソッドは空の選択範囲を返します。

<li> 要素の最も近い祖先 <ul> 要素を選択するために closest を使用した例を以下に示します。

ライブエディター
const $ = cheerio.load(
  `<div>
    <ul>
      <li>Item 1</li>
    </ul>
  </div>`,
);

const list = $('li').closest('ul');
render(<>{list.prop('tagName')}</>);
結果
読み込み中…

DOM ツリー内での横方向への移動​

Cheerio は、DOM ツリー内を横方向に移動し、現在の選択範囲の兄弟である要素を選択するためのいくつかのメソッドを提供します。

next と prev​

next メソッドを使用すると、選択範囲の次の兄弟要素を選択できます。（存在する場合）次の兄弟要素を含む新しい選択範囲を返します。指定された選択範囲に複数の要素が含まれる場合、next にはそれぞれについて次の兄弟が含まれます。

prev メソッドは next と似ていますが、前の兄弟要素を選択できます。指定された選択範囲の各要素について、前の兄弟要素を含む新しい選択範囲を返します。

<li> 要素の兄弟要素を選択するために next と prev を使用した例を以下に示します。

ライブエディター
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>`,
);

const nextItem = $('li:first').next();
const prevItem = $('li:eq(1)').prev();

render(
  <>
    <p>Next: {nextItem.text()}</p>
    <p>Prev: {prevItem.text()}</p>
  </>,
);
結果
読み込み中…

nextAll、prevAll、および siblings​

nextAll メソッドを使用すると、現在の要素の後のすべての兄弟を選択できます。現在の選択範囲の各要素の後のすべての兄弟要素を含む新しい選択範囲を返します。

prevAll メソッドは nextAll と似ていますが、現在の要素の手前のすべての兄弟を選択できます。現在の選択範囲の各要素の手前のすべての兄弟要素を含む新しい選択範囲を返します。

siblings メソッドを使用すると、選択範囲のすべての兄弟を選択できます。現在の選択範囲の各要素のすべての兄弟要素を含む新しい選択範囲を返します。

<li> 要素の兄弟要素を選択するために nextAll、prevAll、および siblings を使用した例を以下に示します。

ライブエディター
const $ = cheerio.load(
  `<ul>
    <li>[1]</li>
    <li>[2]</li>
    <li>[3]</li>
  </ul>`,
);

const nextAll = $('li:first').nextAll();
const prevAll = $('li:last').prevAll();
const siblings = $('li:eq(1)').siblings();

render(
  <>
    <p>Next All: {nextAll.text()}</p>
    <p>Prev All: {prevAll.text()}</p>
    <p>Siblings: {siblings.text()}</p>
  </>,
);
結果
読み込み中…

nextUntil と prevUntil​

nextUntil メソッドを使用すると、指定された兄弟まで、現在の要素の後のすべての兄弟を選択できます。セレクターまたは兄弟要素を引数として受け取り、指定された要素まで（ただし、指定された要素を含まない）の現在の要素の後のすべての兄弟要素を含む新しい選択範囲を返します。

prevUntil メソッドは nextUntil と似ていますが、指定された兄弟まで、現在の要素の手前のすべての兄弟を選択できます。セレクターまたは兄弟要素を引数として受け取り、指定された要素まで（ただし、指定された要素を含まない）の現在の要素の手前のすべての兄弟要素を含む新しい選択範囲を返します。

<li> 要素の兄弟要素を選択するために nextUntil と prevUntil を使用した例を以下に示します。

ライブエディター
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>`,
);

const nextUntil = $('li:first').nextUntil('li:last-child');
const prevUntil = $('li:last').prevUntil('li:first-child');

render(
  <>
    <p>Next: {nextUntil.text()}</p>
    <p>Prev: {prevUntil.text()}</p>
  </>,
);
結果
読み込み中…

要素のフィルタリング​

Cheerio は、選択範囲内の要素をフィルタリングするためのいくつかのメソッドを提供します。

ヒント

これらのフィルターのほとんどは、セレクターとしても存在します。たとえば、first メソッドは :first セレクターとして使用できます。可能な場合は、セレクター構文を使用することをお勧めします。これは、より高性能です。

eq​

eq メソッド を使用すると、選択範囲内の指定したインデックスにある要素を選択できます。インデックスを引数として受け取り、指定されたインデックスにある要素を含む新しい選択範囲を返します。

以下は、<ul> 要素内の2番目の <li> 要素を選択するために eq を使用する例です。

ライブエディター
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>`,
);

const secondItem = $('li').eq(1);
render(<>{secondItem.text()}</>);
結果
読み込み中…

filter と not​

filter メソッド を使用すると、特定のセレクターに一致する要素を選択できます。セレクターを引数として受け取り、そのセレクターに一致する要素のみを含む新しい選択範囲を返します。

not メソッド は filter と似ていますが、特定のセレクターに一致しない要素を選択できます。セレクターを引数として受け取り、そのセレクターに一致しない要素のみを含む新しい選択範囲を返します。

以下は、<ul> 要素内の <li> 要素を選択するために filter と not を使用する例です。

ライブエディター
const $ = cheerio.load(
  `<ul>
    <li class="item">Item 1</li>
    <li>Item 2</li>
  </ul>`,
);

const matchingItems = $('li').filter('.item');
const nonMatchingItems = $('li').not('.item');

render(
  <>
    <p>Matching: {matchingItems.text()}</p>
    <p>Non-matching: {nonMatchingItems.text()}</p>
  </>,
);
結果
読み込み中…

has​

has メソッド を使用すると、特定のセレクターに一致する要素を含む要素を選択できます。セレクターを引数として受け取り、そのセレクターに一致する要素を含む要素のみを含む新しい選択範囲を返します。

以下は、<strong> 要素を含む <ul> 要素内の <li> 要素を選択するために has を使用する例です。

ライブエディター
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>
      <strong>Item 2</strong>
    </li>
  </ul>`,
);

const matchingItems = $('li').has('strong');
render(<>{matchingItems.length}</>);
結果
読み込み中…

first と last​

first メソッド を使用すると、選択範囲内の最初の要素を選択できます。最初の要素を含む新しい選択範囲を返します。

last メソッド は first と似ていますが、選択範囲内の最後の要素を選択できます。最後の要素を含む新しい選択範囲を返します。

以下は、<ul> 要素内の要素を選択するために first と last を使用する例です。

ライブエディター
const $ = cheerio.load(
  `<ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>`,
);

const firstItem = $('li').first();
const lastItem = $('li').last();

render(
  <>
    <p>First: {firstItem.text()}</p>
    <p>Last: {lastItem.text()}</p>
  </>,
);
結果
読み込み中…

結論​

Cheerio は、ドキュメント内の要素をトラバースおよびフィルタリングするためのさまざまなメソッドを提供します。これらのメソッドを使用すると、DOM ツリーの上下、ツリー内での横移動、さまざまな条件に基づいた要素のフィルタリングを行うことができます。これらのメソッドを使用することで、Cheerio を使用してドキュメント内の要素を簡単に選択および操作できます。