JavaScript 入門 | ドキュメントオブジェクトモデル | ノードの管理

Tags:

ノードの追加

次のメソッドを使用すると、特定の位置に新しいノードを追加できる。

  1. appendChild()
  2. insertBefore()
  3. insertData()

appendChild() メソッド

appendChild() メソッドは、新しいノードをそのノードの子ノードリストの末尾に追加する。

function appendNode() {
    var parent = document.getElementById("list");  // id が "list" の要素を選択する。
    var newItem = document.getElementById("item"); // id が "item" の要素を選択する。
    parent.appendChild(newItem);                   // その要素の最後の子ノードとして追加する。
}

insertBefore() メソッド

insertBefore() メソッドは、新しいノードを特定の子ノードの直前に追加する。

insertBefore() メソッドの形式は次のとおりである。

形式

親ノード.insertBefore(新しい子ノード, 基準子ノード);
  1. 新しい子ノード: 子ノードリストに新しく追加する子ノードを渡す。
  2. 基準子ノード: 新しいノードを挿入するときの基準となるノードで、このノードの直前に新しいノードが追加される。
function appendNode() {
    var parent = document.getElementById("list");           // id が "list" の要素を選択する。
    var criteriaItem = document.getElementById("criteria"); // id が "criteria" の要素を選択する。
    var newItem = document.getElementById("item");          // id が "item" の要素を選択する。
    parent.insertBefore(newItem, criteriaItem); // そのノードを基準となる子ノードの直前に追加する。
}

基準子ノードに null 値を渡すと、新しいノードは子ノードリストの最後のノードとして追加される。
つまり、appendChild() メソッドと完全に同じ動作をする。

insertData() メソッド

insertData() メソッドは、テキストノードのテキストデータに新しいテキストを追加する。

insertData() メソッドの形式は次のとおりである。

形式

テキストノード.insertData(オフセット, 新しいデータ);
  1. オフセット: オフセット値は0から始まり、既存のテキストデータの何番目の位置から追加するかを渡す。
  2. 新しいデータ: 新しく挿入するテキストデータを渡す。
var text = document.getElementById("text").firstChild; // id が "text" の要素のテキストノードを選択する。
function appendText() {
    text.insertData(6, " 나른한 "); // テキストノードの6番目の文字から " 나른한 " というテキストを追加する。
}

ノードの作成

作成するノードの種類に応じて、次のようなメソッドを使用できる。

  1. createElement()
  2. createAttribute()
  3. createTextNode()

要素ノードの作成

createElement() メソッドを使用して、新しい要素ノードを作成できる。

function createNode() {
    var criteriaNode = document.getElementById("text"); // 基準となる要素として id が "text" の要素を選択する。
    var newNode = document.createElement("p");          // 新しい <p> 要素を作成する。
    newNode.innerHTML = "새로운 단락이다.";
    document.body.insertBefore(newNode, criteriaNode);  // 新しい要素を基準となる要素の直前に追加する。
}

属性ノードの作成

createAttribute() メソッドを使用して、新しい属性ノードを作成できる。

同じ名前の属性ノードがすでに存在する場合、既存の属性ノードは新しい属性ノードに置き換えられる。
すでに存在する要素ノードに属性ノードを作成したい場合は、setAttribute() メソッドを使用できる。

function createNode() {
    var text = document.getElementById("text");           // id が "text" の要素を選択する。
    var newAttribute = document.createAttribute("style"); // 新しい style 属性ノードを作成する。
    newAttribute.value = "color:red";
    text.setAttributeNode(newAttribute);                  // その要素の属性ノードとして追加する。
}

テキストノードの作成

createTextNode() メソッドを使用して、新しいテキストノードを作成できる。

function createNode() {
    var elementNode = document.getElementById("text");           // id が "text" の要素を選択する。
    var newText = document.createTextNode("새로운 텍스트에요!"); // 新しいテキストノードを作成する。
    elementNode.appendChild(newText);                            // その要素の子ノードとして追加する。
}

ノードの削除

次のメソッドを使用すると、特定のノードを削除できる。

  1. removeChild()
  2. removeAttribute()

removeChild() メソッド

removeChild() メソッドは、子ノードリストから特定の子ノードを削除する。

このメソッドはノードの削除に成功すると、削除されたノードを返す。
ノードが削除されるときは、削除されるノードのすべての子ノードも一緒に削除される。

var parent = document.getElementById("list");      // id が "list" の要素を選択する。
var removedItem = document.getElementById("item"); // id が "item" の要素を選択する。
parent.removeChild(removedItem);                   // 指定された要素を削除する。

removeAttribute() メソッド

removeAttribute() メソッドは、属性名を利用して特定の属性ノードを削除する。

var text = document.getElementById("text"); // id が "text" の要素を選択する。
text.removeAttribute("style");              // その要素の "style" 属性を削除する。

ノードの複製

cloneNode() メソッドを使用すると、特定のノードを複製できる。

cloneNode() メソッド

cloneNode() メソッドは、既存のノードとまったく同じ新しいノードを作成して返す。

cloneNode() メソッドの形式は次のとおりである。

形式

複製するノード.cloneNode(子ノードを複製するかどうか);
  • 子ノードを複製するかどうか: 渡された値が true であれば、複製されるノードのすべての属性ノードと子ノードも一緒に複製し、false であれば属性ノードだけを複製して子ノードは複製しない。
function cloneElement() {
    var parent = document.getElementById("list");     // id が "list" の要素を選択する。
    var originItem = document.getElementById("item"); // id が "item" の要素を選択する。
    parent.appendChild(originItem.cloneNode(true));   // そのノードを複製してリストの最後に追加する。
}