情報アイランド

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

cheerioの主なAPI(2)操作

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

html関数

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

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

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

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

text関数

選択されているHTML要素のテキストを取得するか、設定します。取得の場合、選択されている最初のHTML要素のテキストを取得します。設定の場合、選択されている全てのHTML要素のテキストを設定します。

第1引数にテキストを指定します。

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

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

css関数

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

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

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

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

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

wrap関数

選択されている全てのHTML要素を別のHTML要素で包みます。

第1引数にHTML要素を指定します。

cheerio-manipulation-1.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').text());
console.log($('#p2').text());
console.log($('#p3').text());

$('p').text('paragraph');

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

console.log($('#p1').css('background-color'));
console.log($('#p2').css('background-color'));
console.log($('#p3').css('background-color'));

$('p').css('background-color', 'red');

console.log($('#p1').css('background-color'));
console.log($('#p2').css('background-color'));
console.log($('#p3').css('background-color'));

$('p').wrap($('<div></div>'));

console.log($('*').html());

$('*').html('<h1>midashi</h1>');

console.log($('*').html());

実行結果

C:\work\node>node cheerio-manipulation-1.js
paragraph 1
paragraph 2
paragraph 3
paragraph
paragraph
paragraph
undefined
undefined
undefined
red
red
red

        <head>
                <meta charset="UTF-8">
                <title>title</title>
        </head>
        <body>
                <div><p id="p1" style="background-color: red;">paragraph</p></div>
                <div><p id="p2" style="background-color: red;">paragraph</p></div>
                <div><p id="p3" style="background-color: red;">paragraph</p></div>
        </body>

<h1>midashi</h1>

append関数

選択されている全てのHTML要素の末尾に子要素として別のHTML要素を追加します。

第1引数にHTML要素をセレクションとして指定します。

appendTo関数

選択されている全てのHTML要素を子要素として別のHTML要素の末尾に追加します。

第1引数にHTML要素をセレクションとして指定します。

prepend関数

選択されている全てのHTML要素の先頭に子要素として別のHTML要素を追加します。

第1引数にHTML要素をセレクションとして指定します。

prependTo関数

選択されている全てのHTML要素を子要素として別のHTML要素に追加します。

第1引数にHTML要素をセレクションとして指定します。

after関数

選択されている全てのHTML要素の直後に別のHTML要素を追加します。

第1引数にHTML要素をセレクションとして指定します。

insertAfter関数

選択されている全てのHTML要素を別のHTML要素の直後に追加します。

第1引数にHTML要素をセレクションとして指定します。

before関数

選択されている全てのHTML要素の直前に別のHTML要素を追加します。

第1引数にHTML要素をセレクションとして指定します。

insertBefore関数

選択されている全てのHTML要素を別のHTML要素の直前に追加します。

第1引数にHTML要素をセレクションとして指定します。

remove関数

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

replaceWith関数

選択されている全てのHTML要素を別のHTML要素に置き換えます。

第1引数にHTML要素をセレクションとして指定します。

empty関数

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

cheerio-manipulation-2.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>
`);

$('body').append($('<p id="p4">paragraph 4</p>'));
$('<p id="p5">paragraph 5</p>').appendTo($('body'));

$('body').prepend($('<p id="p0">paragraph 0</p>'));
$('<p id="p-1">paragraph -1</p>').prependTo($('body'));

$('#p2').before($('<p id="p2-1">paragraph 2-1</p>'));
$('<p id="p2-2">paragraph 2-2</p>').insertBefore($('#p2'));

$('#p2').after($('<p id="p2-3">paragraph 2-3</p>'));
$('<p id="p2-4">paragraph 2-4</p>').insertAfter($('#p2'));

console.log($('*').html());

$('#p1').remove();
$('#p5').replaceWith($('<p id="p99">paragraph 99</p>'));

console.log($('*').html());

$('body').empty();

console.log($('*').html());

実行結果

C:\work\node>node cheerio-manipulation-2.js

        <head>
                <meta charset="UTF-8">
                <title>title</title>
        </head>
        <body><p id="p-1">paragraph -1</p><p id="p0">paragraph 0</p>
                <p id="p1">paragraph 1</p>
                <p id="p2-1">paragraph 2-1</p><p id="p2-2">paragraph 2-2</p><p id="p2">paragraph 2</p><p id="p2-4">paragraph 2-4</p><p id="p2-3">paragraph 2-3</p>
                <p id="p3">paragraph 3</p>
        <p id="p4">paragraph 4</p><p id="p5">paragraph 5</p></body>


        <head>
                <meta charset="UTF-8">
                <title>title</title>
        </head>
        <body><p id="p-1">paragraph -1</p><p id="p0">paragraph 0</p>

                <p id="p2-1">paragraph 2-1</p><p id="p2-2">paragraph 2-2</p><p id="p2">paragraph 2</p><p id="p2-4">paragraph 2-4</p><p id="p2-3">paragraph 2-3</p>
                <p id="p3">paragraph 3</p>
        <p id="p4">paragraph 4</p><p id="p99">paragraph 99</p></body>


        <head>
                <meta charset="UTF-8">
                <title>title</title>
        </head>
        <body></body>

関連

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

-Node.js