Node.jsでjsdomを使ってDOMを使用する
2016/08/17
目次
DOMを使用するには下のようなモジュールを利用する方法があります。
jsdomcheeriod3
この記事では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
関連
スポンサーリンク