コンテンツにスキップ

JavaScript/DOM/Node

出典: フリー教科書『ウィキブックス(Wikibooks)』

概要

[編集]

NodeはDOMの全てのオブジェクトの基本インターフェースです。Document、Element、Text、Commentなどが継承しています。

プロパティ

[編集]
node.nodeType      // ノードの種類(1=Element, 3=Text等)
node.nodeName      // ノードの名前
node.nodeValue     // ノードの値
node.textContent   // テキスト内容
node.parentNode    // 親ノード
node.childNodes    // 子ノードリスト
node.firstChild    // 最初の子ノード
node.lastChild     // 最後の子ノード
node.nextSibling   // 次の兄弟ノード
node.previousSibling // 前の兄弟ノード

メソッド

[編集]
// ノードの操作
appendChild(node)           // 子ノード追加
insertBefore(node, ref)    // 指定位置に挿入
removeChild(node)          // 子ノード削除
replaceChild(new, old)     // 子ノード置換
cloneNode(deep)            // ノードの複製
contains(node)             // ノードを含むか判定

// ノード比較
isEqualNode(node)          // 同一内容か判定
isSameNode(node)           // 同一ノードか判定

nodeTypeの主な値

[編集]
Node.ELEMENT_NODE                   // 1
Node.TEXT_NODE                      // 3
Node.COMMENT_NODE                   // 8
Node.DOCUMENT_NODE                  // 9
Node.DOCUMENT_TYPE_NODE            // 10

使用例

[編集]
// 新しい要素の追加
let div = document.createElement('div');
document.body.appendChild(div);

// テキストノードの作成
let text = document.createTextNode('Hello');
div.appendChild(text);

// ノードの走査
let parent = div.parentNode;
let children = div.childNodes;