ツリー構造を作成するために、構成要素を保持するためのノードクラスを定義します。
Node クラスの定義
Node はツリー構造の1つの構成要素です。 Node は値(nodeValue)と子ノード(childNodes)を保持します。 子ノードは、Node の配列を入れます。
// クラス宣言
class Node {
// 子ノードリスト
childNodes: null;
// ノードの直下の最初の子ノード ※子ノードがなければ null
firstChild: null;
// ノードの直下の最後の子ノード ※子ノードがなければ null
lastChild: null;
// ツリー構造で次のノード ※該当するノードがない場合は null
nextSibling = null;
// ツリー構造で前のノード ※該当するノードがない場合は null
previousSibling = null;
// Node の名前
nodeName = null;
// ノードの型
nodeType = null;
// カレントノードの値
nodeValue = null;
// ノードの親の Node ※ノードがツリーの最上位である、あるいはツリーに加わっていないなど、親が存在しない場合は null
parentNode = null;
/**
* Represents a node.
* @constructor
* @param {string} nodeValue - The nodeValue property of the Node interface returns or sets the value of the current node.
* @param {string} childNodes - The Node.childNodes read-only property returns a live NodeList of child nodes of the given element where the first child node is assigned index 0. Child nodes include elements, text and comments.
*/
constructor(nodeValue, childNodes) {
this.nodeValue = value;
this.childNodes = childNodes;
}
// カレントノードの最後の子として、指定した childNode 引数を追加します。引数が ツリー上の既存のノードを参照している場合は、ノードが現在の位置から外されて新しい位置に追加されます。
Node appendChild(Node node);
// Node を複製します。また、すべての内容物を複製することもできます。デフォルトで、ノードの内容物を複製します。
Node cloneNode(optional boolean deep = false);
// ノードが指定したノードの子孫であるか否かを示す Boolean 値を返します。
boolean contains(Node? other);
// オブジェクトのルートを返します。
Node getRootNode(optional GetRootNodeOptions options = {});
// 要素が子ノードを持っているか否かを示す Boolean を返します。
boolean hasChildNodes();
// カレントノードの子として、参照先ノードの前に Node を挿入します。
Node insertBefore(Node node, Node? child);
// カレントノードの子 Node のひとつを、引数で指定した別のノードで置き換えます。
Node replaceChild(Node node, Node child);
// カレント要素から子ノードを削除します。カレント要素はカレントノードの子であることが必要です。
Node removeChild(Node child);
}
上記のツリーのデータ構造を表示するためには、以下のコードですべての要素を表示できます。
// ツリー構造を表示
eachNode(tree, ' ', 2);
/**
* ツリー構造を表示する。
* @param {Node} rootNode ツリー構造オブジェクト
* @param {string} textIndent ブロック内のテキストの行の前に置く空白 (字下げ) を設定します。
* @param {number} textIndentLength ブロック内のテキストの行の前に置く空白 (字下げ) の幅を設定します。
*/
function eachNode(rootNode, textIndent, textIndentLength) {
// インデントを表示
for (let i = 0; i < textIndentLength; i++) {
console.log(textIndent);
}
// 現在のツリー要素の値を表示
console.log(rootNode.nodeValue + "<br />");
// 子ノードがあれば子ノードを表示
if (rootNode.childNodes) {
for (let i = 0; i < rootNode.childNodes.length; i++) {
// 再帰的に呼び出す
eachNode(rootNode.childNodes[i], textIndent, textIndentLength + textIndentLength);
}
}
}