情報アイランド

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

cheerioの主なAPI(1)属性

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

attr関数

選択されているHTML要素の属性の値を取得するか、設定します。取得の場合、選択されている最初のHTML要素の属性の値を取得します。設定の場合、選択されている全てのHTML要素の属性の値を設定します。

第1引数に属性の名称を指定します。

第2引数に属性の値を指定します。

第1引数のみ指定した場合には取得となり、第1引数と第2引数の両方を指定した場合には設定となります。ただし、第2引数にnullを指定した場合には属性自体が削除されます。

取得の場合、返り値として属性の値が得られます。

cheerio-attr.js

var cheerio = require('cheerio');

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

console.log($('#p1').attr('class'));
$('#p1').attr('class', 'paragraph');
console.log($('#p1').attr('class'));
$('#p1').attr('class', '');
console.log($('#p1').attr('class'));
$('#p1').attr('class', null);
console.log($('#p1').attr('class'));

console.log($('#p1').attr('class'));
console.log($('#p2').attr('class'));
console.log($('#p3').attr('class'));
$('p').attr('class', 'paragraph');
console.log($('#p1').attr('class'));
console.log($('#p2').attr('class'));
console.log($('#p3').attr('class'));

実行結果

C:\work\node>node cheerio-attr.js
undefined
paragraph

undefined
undefined
undefined
undefined
paragraph
paragraph
paragraph

data関数

選択されているHTML要素のデータ属性(属性の名称がdata-から始まる属性)の値を取得するか、設定します。取得の場合、選択されている最初のHTML要素のデータ属性の値を取得します。設定の場合、選択されている全てのHTML要素のデータ属性の値を設定します。

第1引数にデータ属性の名称を指定します。

第2引数にデータ属性の値を指定します。

第1引数のみ指定した場合には取得となり、第1引数と第2引数の両方を指定した場合には設定となります。

取得の場合、返り値としてデータ属性の値が得られます。

prop関数

選択されているHTML要素のプロパティの値を取得するか、設定します。取得の場合、選択されている最初のHTML要素のプロパティの値を取得します。設定の場合、選択されている全てのHTML要素のプロパティの値を設定します。

第1引数にプロパティの名称を指定します。

第2引数にプロパティの値を指定します。

第1引数のみ指定した場合には取得となり、第1引数と第2引数の両方を指定した場合には設定となります。

取得の場合、返り値としてプロパティの値が得られます。

val関数

選択されているinput要素やoption要素やtextarea要素などの値を取得するか、設定します。

第1引数に値を指定します。

引数を指定しなかった場合には取得となり、指定した場合には設定となります。

取得の場合、返り値として値が得られます。

removeAttr関数

選択されている全てのHTML要素の属性を削除します。

第1引数に属性の名称を指定します。

hasClass関数

選択されているHTML要素の何れかがクラス名を有するかチェックします。

第1引数にクラス名を指定します。

返り値としてクラス名を有するかが真偽値として得られます。

addClass関数

選択されている全てのHTML要素にクラス名を追加します。

第1引数にクラス名を指定します。クラス名は複数指定することもできます。複数のクラス名を指定する場合には空白で区切ります。

removeClass関数

選択されている全てのHTML要素からクラス名を削除します。

第1引数にクラス名を指定します。クラス名は複数指定することもできます。複数のクラス名を指定する場合には空白で区切ります。この引数は指定しなくても構いません。この引数を指定しなかった場合には全てのクラス名が削除されます。

toggleClass関数

選択されている全てのHTML要素にクラス名を追加したり、削除したりします。

第1引数にクラス名を指定します。クラス名は複数指定することもできます。複数のクラス名を指定する場合には空白で区切ります。

第2引数にクラス名を追加するか、削除するかを真偽値として指定します。追加する場合にはtrueを指定し、削除する場合にはfalseを指定します。この引数は指定しなくても構いません。この引数を指定しなかった場合にはクラス名を有しないHTML要素にはクラス名が追加され、クラス名を有するHTML要素からはクラス名が削除されます。

cheerio-class.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="paragraph">paragraph 1</p>
        <p id="p2" class="paragraph">paragraph 2</p>
        <p id="p3" class="paragraph">paragraph 3</p>
    </body>
</html>
`);

console.log($('#p1').hasClass('paragraph'));
console.log($('#p2').hasClass('paragraph'));
console.log($('#p3').hasClass('paragraph'));

console.log($('#p1').hasClass('parasite'));
console.log($('#p2').hasClass('parasite'));
console.log($('#p3').hasClass('parasite'));

$('p').addClass('parasite paradise');

console.log($('#p1').hasClass('parasite'));
console.log($('#p2').hasClass('parasite'));
console.log($('#p3').hasClass('parasite'));

$('p').removeClass('parasite paradise');

console.log($('#p1').hasClass('parasite'));
console.log($('#p2').hasClass('parasite'));
console.log($('#p3').hasClass('parasite'));

$('#p1').toggleClass('paradox', true);
$('#p2').toggleClass('parallax', true);
$('#p3').toggleClass('parasol', true);

console.log($('#p1').attr('class'));
console.log($('#p2').attr('class'));
console.log($('#p3').attr('class'));

$('p').toggleClass('paragraph', false);

console.log($('#p1').attr('class'));
console.log($('#p2').attr('class'));
console.log($('#p3').attr('class'));

$('p').toggleClass('paradox parallax parasol');

console.log($('#p1').attr('class'));
console.log($('#p2').attr('class'));
console.log($('#p3').attr('class'));

実行結果

C:\work\node>node cheerio-class.js
true
true
true
false
false
false
true
true
true
false
false
false
paragraph paradox
paragraph parallax
paragraph parasol
paradox
parallax
parasol
parallax parasol
paradox parasol
paradox parallax

is関数

選択されているHTML要素の何れかがCSSセレクタにより選択されるかチェックします。

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

返り値として選択されるかが真偽値として得られます。

cheerio-is.js

var cheerio = require('cheerio');

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

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

console.log($('#p1').is('p'));
console.log($('p').is('#p1'));

console.log($('#p1').is('#p2'));
console.log($('#p2').is('#p1'));

実行結果

C:\work\node>node cheerio-is.js
true
true
true
false
false

関連

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

-Node.js