情報アイランド

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

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

2016/08/17

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

  • jsdom
  • cheerio
  • d3

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

DOMの作成

DOMを作成するにはjsdom.jsdom関数を呼び出します。

var jsdom = require('jsdom');

var document = jsdom.jsdom('xxx');

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

返り値としてHTMLドキュメントを表すDOMのドキュメントオブジェクトが得られます。

サンプルコード1

DOMのgetElementById関数、getElementsByTagName関数、getElementsByClassName関数などの使用例です。

jsdom-1.js

var jsdom = require('jsdom');

var document = jsdom.jsdom(`
<!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(document.getElementById('p1').innerHTML);

var ps = document.getElementsByTagName('p');
for (var i = 0; i < ps.length; i++) {
    console.log(ps[i].innerHTML);
}

var podds = document.getElementsByClassName('odd');
for (var i = 0; i < podds.length; i++) {
    console.log(podds[i].innerHTML);
}

使用パッケージ

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

実行結果

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

サンプルコード2

DOMのquerySelector関数、querySelectorAll関数などの使用例です。

jsdom-2.js

var jsdom = require('jsdom');

var document = jsdom.jsdom(`
<!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(document.querySelector('#p1').innerHTML);

var ps = document.querySelectorAll('p');
for (var i = 0; i < ps.length; i++) {
    console.log(ps[i].innerHTML);
}

var podds = document.querySelectorAll('.odd');
for (var i = 0; i < podds.length; i++) {
    console.log(podds[i].innerHTML);
}

使用パッケージ

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

実行結果

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

関連

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

-Node.js