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

ノードの値の変更

nodeValueプロパティを使用すると、特定のノードの値を変更できる。また、setAttribute()メソッドを使用すると、属性ノードの属性値を変更できる。

要素ノードのテキスト

要素ノードは、自分自身で直接テキスト値を持つわけではない。要素ノードのテキストは、要素ノードの子ノードであるテキストノードに保存される。そのため、要素ノードのテキスト値を確認または変更したい場合は、要素ノードに含まれるテキストノードにアクセスする必要がある。

テキストノードの値は、nodeValueプロパティを使用して変更できる。

var para = document.getElementById("text"); // IDが"text"の要素を選択する。
function changeText() {
    para.firstChild.nodeValue = "テキストの変更が完了しました！";
}

属性ノードの値の変更

属性ノードは、nodeValueプロパティだけでなくsetAttribute()メソッドを使用して値を変更できる。 setAttribute()メソッドは、値を変更しようとしている属性が存在しない場合、まずその属性を作成してから属性値を設定する。

var para;
function changeAttribute() {
    // すべての<p>要素のうち、最初の要素にclass属性値として"para"を設定する。
    document.getElementsByTagName("p")[0].setAttribute("class", "para");
    // classが設定されると、そのclassに定義されていたスタイルが自動的に適用される。
}

要素ノードの置換

replaceChild()メソッドを使用すると、既存の要素ノードを新しい要素ノードに置き換えられる。

replaceChild()メソッドの構文は次のとおりである。

構文

置換されたノード = 親ノード.replaceChild(新しい子ノード, 既存の子ノード);

新しい子ノード: 子ノードリストに新しく追加する要素ノードを渡す。
既存の子ノード: 子ノードリストから削除する要素ノードを渡す。

次の例は、子ノードのうち最初の要素を削除し、その代わりに3番目の要素を最初の要素の位置に挿入する例である。

var parent = document.getElementById("parent"); // 親ノードを選択する。
var first = document.getElementById("first");
var third = document.getElementById("third");
function changeNode() {
    parent.replaceChild(third, first);          // first要素を削除し、その代わりにthird要素を挿入する。
}

テキストノードのデータ置換

replaceData()メソッドを使用すると、テキストノードのテキストデータを置き換えられる。

replaceData()メソッドの構文は次のとおりである。

構文

テキストノード.replaceData(オフセット, 置換する文字数, 新しいデータ);

オフセット: オフセット値は0から始まり、既存のテキストデータの何文字目から置換するかを渡す。
置換する文字数: 既存のテキストノードのデータから置換する合計文字数を渡す。
新しいデータ: 新しく挿入するテキストデータを渡す。

var text = document.getElementById("text").firstChild; // IDが"text"の要素のテキストノードを選択する。
function changeText() {
    text.replaceData(7, 4, "午後7"); // テキストノードの7文字目から4文字を"午後7"に置き換える。
}