情報アイランド

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

Node.js+jsdom+D3によるDOMの使用(2)DOM全体からの要素の選択

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

  • jsdom
  • cheerio
  • d3

この連載記事ではd3モジュールを利用する方法を取り上げ、この記事ではDOM全体から要素を選択する方法を説明します。

DOM全体からの要素の選択

d3モジュールにはDOM全体から要素を選択するための関数が幾つか提供されています。

ルート要素の選択

DOM全体からルート要素であるdocument.documentElementを選択するにはd3.selection関数を使用します。

var d3 = require('d3');

var selection = d3.selection();

返り値としてdocument.documentElementを唯一のグループの親要素とし、document.documentElementをグループの要素とするセレクションが得られます。

単一の要素の選択

DOM全体から単一の要素を選択するにはd3.select関数を使用します。

var selection = d3.select(xxx);

第1引数に単一の要素を指定します。

返り値としてdocument.documentElementを唯一のグループの親要素とし、単一の要素をグループの要素とするセレクションが得られます。

複数の要素の選択

DOM全体から複数の要素を選択するにはd3.selectAll関数を使用します。

var selection = d3.selectAll([xxx, yyy]);

第1引数に複数の要素を配列として指定します。

返り値としてdocument.documentElementを唯一のグループの親要素とし、複数の要素をグループの要素とするセレクションが得られます。

最初の要素の選択

DOM全体からCSSセレクタに合致する最初の要素を選択するにはd3.select関数を使用します。

var selection = d3.select('xxx');

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

返り値としてdocument.documentElementを唯一のグループの親要素とし、CSSセレクタに合致する最初の要素をグループの要素とするセレクションが得られます。

全ての要素の選択

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

var selection = d3.selectAll('xxx');

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

返り値としてdocument.documentElementを唯一のグループの親要素とし、CSSセレクタに合致する全ての要素をグループの要素とするセレクションが得られます。

このセレクションにおける要素のグループ内での順序はDOMにおける要素の順序と同じです。

サンプルコード1

d3-select.js

var jsdom = require('jsdom');

global.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>
`);

var d3 = require('d3');

console.log(d3.selection());
console.log(d3.select('#p1'));
console.log(d3.selectAll('#p1'));
console.log(d3.select('p'));
console.log(d3.selectAll('p'));
console.log(d3.select('.odd'));
console.log(d3.selectAll('.odd'));
console.log(d3.select('.ogg'));
console.log(d3.selectAll('.ogg'));

使用パッケージ

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

実行結果

C:\work\node>node d3-select.js
Selection { _groups: [ [ [Object] ] ], _parents: [ null ] }
Selection {
  _groups: [ [ [Object] ] ],
  _parents:
   [ Element {
       _childNodesList: null,
       _ownerDocument: [Object],
       _childrenList: null,
       _version: 3,
       _memoizedQueries: {},
       _readonly: false,
       _namespaceURI: 'http://www.w3.org/1999/xhtml',
       _prefix: null,
       _localName: 'html',
       _attributes: NamedNodeMap {},
       _settingCssText: false,
       _style: [Object],
       _attached: true,
       _attachedToDocument: true } ] }
Selection {
  _groups: [ NodeList { '0': [Object] } ],
  _parents:
   [ Element {
       _childNodesList: null,
       _ownerDocument: [Object],
       _childrenList: null,
       _version: 3,
       _memoizedQueries: {},
       _readonly: false,
       _namespaceURI: 'http://www.w3.org/1999/xhtml',
       _prefix: null,
       _localName: 'html',
       _attributes: NamedNodeMap {},
       _settingCssText: false,
       _style: [Object],
       _attached: true,
       _attachedToDocument: true } ] }
Selection {
  _groups: [ [ [Object] ] ],
  _parents:
   [ Element {
       _childNodesList: null,
       _ownerDocument: [Object],
       _childrenList: null,
       _version: 3,
       _memoizedQueries: {},
       _readonly: false,
       _namespaceURI: 'http://www.w3.org/1999/xhtml',
       _prefix: null,
       _localName: 'html',
       _attributes: NamedNodeMap {},
       _settingCssText: false,
       _style: [Object],
       _attached: true,
       _attachedToDocument: true } ] }
Selection {
  _groups:
   [ NodeList {
       '0': [Object],
       '1': [Object],
       '2': [Object],
       '3': [Object],
       '4': [Object] } ],
  _parents:
   [ Element {
       _childNodesList: null,
       _ownerDocument: [Object],
       _childrenList: null,
       _version: 3,
       _memoizedQueries: {},
       _readonly: false,
       _namespaceURI: 'http://www.w3.org/1999/xhtml',
       _prefix: null,
       _localName: 'html',
       _attributes: NamedNodeMap {},
       _settingCssText: false,
       _style: [Object],
       _attached: true,
       _attachedToDocument: true } ] }
Selection {
  _groups: [ [ [Object] ] ],
  _parents:
   [ Element {
       _childNodesList: null,
       _ownerDocument: [Object],
       _childrenList: null,
       _version: 3,
       _memoizedQueries: {},
       _readonly: false,
       _namespaceURI: 'http://www.w3.org/1999/xhtml',
       _prefix: null,
       _localName: 'html',
       _attributes: NamedNodeMap {},
       _settingCssText: false,
       _style: [Object],
       _attached: true,
       _attachedToDocument: true,
       _classList: DOMTokenList {} } ] }
Selection {
  _groups: [ NodeList { '0': [Object], '1': [Object], '2': [Object] } ],
  _parents:
   [ Element {
       _childNodesList: null,
       _ownerDocument: [Object],
       _childrenList: null,
       _version: 3,
       _memoizedQueries: {},
       _readonly: false,
       _namespaceURI: 'http://www.w3.org/1999/xhtml',
       _prefix: null,
       _localName: 'html',
       _attributes: NamedNodeMap {},
       _settingCssText: false,
       _style: [Object],
       _attached: true,
       _attachedToDocument: true,
       _classList: DOMTokenList {} } ] }
Selection {
  _groups: [ [ null ] ],
  _parents:
   [ Element {
       _childNodesList: null,
       _ownerDocument: [Object],
       _childrenList: null,
       _version: 3,
       _memoizedQueries: {},
       _readonly: false,
       _namespaceURI: 'http://www.w3.org/1999/xhtml',
       _prefix: null,
       _localName: 'html',
       _attributes: NamedNodeMap {},
       _settingCssText: false,
       _style: [Object],
       _attached: true,
       _attachedToDocument: true,
       _classList: DOMTokenList {} } ] }
Selection {
  _groups: [ NodeList {} ],
  _parents:
   [ Element {
       _childNodesList: null,
       _ownerDocument: [Object],
       _childrenList: null,
       _version: 3,
       _memoizedQueries: {},
       _readonly: false,
       _namespaceURI: 'http://www.w3.org/1999/xhtml',
       _prefix: null,
       _localName: 'html',
       _attributes: NamedNodeMap {},
       _settingCssText: false,
       _style: [Object],
       _attached: true,
       _attachedToDocument: true,
       _classList: DOMTokenList {} } ] }

関連

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

-d3.js, Node.js