情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Node.jsでcheerioを使ってDOMを使用する

2016/08/29

DOMを使用するには下のようなモジュールを利用する方法があります。

  • jsdom
  • cheerio
  • d3

この記事ではcheerioモジュールを利用する方法を取り上げます。

DOMの作成

DOMを作成するにはcheerio.load関数を使用します。

var cheerio = require('cheerio');

var $ = cheerio.load('xxx', {
    withDomLvl1: true,
    normalizeWhitespace: false,
    xmlMode: false,
    decodeEntities: true
});

第1引数にHTMLドキュメントを指定します。

第2引数にオプションをオブジェクトとして指定します。この引数は指定しなくても構いません。

返り値としてHTMLドキュメントのDOMを表すオブジェクトが得られます。このオブジェクトは$という名称の変数に格納されることが多いです。以後このオブジェクトを$と表記します。

選択

DOMの使用における最も基本的な操作の1つとして選択があります。

選択とはDOMの単一又は複数の要素から子要素である単一又は複数の要素を1つの操作対象として取り出すことです。

つまり、選択対象から操作対象を取り出すことを選択と言います。そして、選択対象と操作対象は何れもDOMの単一又は複数の要素です。

cheerioモジュールでは操作対象をセレクションと言います。

DOM全体かセレクションからCSSセレクタに合致する全ての要素を選択するには$関数を使用します。

var selection = $('xxx', 'yyy');
//or
var selection = $('xxx', selection2);

第1引数にCSSセレクタを指定します。

第2引数にセレクションを指定します。あるいは、CSSセレクタを指定することもできます。この引数は指定しなくても構いません。

この引数によるセレクションが選択における選択対象となります。ただし、この引数を指定しなかった場合にはDOM全体が選択対象となります。

返り値としてセレクションが得られます。

要素の作成

DOMの使用においては既にDOMの中に存在している要素を選択するだけではなく、新しい要素を作成する必要もあります。

新しい要素を作成するには$関数を使用します。

var selection = $('xxx');

第1引数に要素を表す文字列(HTMLなど)を指定します。

返り値として作成された要素を選択するセレクションが得られます。

なお、要素は作成された時点では未だDOMの中に追加されていませんので注意してください。

その他

cheerioモジュールのその他の使用方法に関しては下の記事を参照してください。

また、cheerioモジュールのその他の主なAPIに関しては下の記事を参照してください。

サンプルコード1

cheerio.js

var cheerio = require('cheerio');

var $ = cheerio.load(`
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
        <p id="p1" class="odd">paragraph 1</p>
        <p id="p2" class="even">paragraph 2</p>
        <p id="p3" class="odd">paragraph 3</p>
        <p id="p4" class="even">paragraph 4</p>
        <p id="p5" class="odd">paragraph 5</p>
    </body>
</html>
`);

console.log($('#p1').text());

$('p').each(function () {
    console.log($(this).text());
});

$('.odd').each(function () {
    console.log($(this).text());
});

使用パッケージ

  • cheerio
    npm install cheerioでインストールします。

実行結果

C:\work\node>node cheerio.js
paragraph 1
paragraph 1
paragraph 2
paragraph 3
paragraph 4
paragraph 5
paragraph 1
paragraph 3
paragraph 5

関連

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-Node.js