DOM

HTML中の要素(タグ)はそれぞれ要素ノード、タグに囲まれたテキストはテキストノードと呼ばれ、それぞれオブジェクトとしてメソッドやプロパティを持つ。
HTML文書中の要素ノードと要素ノード、あるいは要素ノードとテキストノードの間には家系図のように親子関係兄弟関係が存在する。
これらの要素に対してJavaScriptからアクセスできる。

要素の指定の仕方

HTML文書中の特定の要素ノードを指定するにはdocumentオブジェクトのgetElementsByTagName()メソッドあるいはgetElementById()メソッドを使う。
前者はタグ名を引数として受け取る。同じ要素を持つノードは複数存在するため、該当する個々の要素ノードへの参照を、オブジェクト型データとして配列形式で返す。

document.getElementsByTagName("img")[0]

後者は要素のid属性を引数として受け取り、該当する要素ノードへの参照を、オブジェクト型データで返す。

document.getElementById("para1")

要素ノードの子ノードへアクセスするにはchildNodesプロパティを使う。
テキストノードを含めた子ノード全ての参照を配列形式で返す。

document.getElementById("para1").childNodes[0]

テキストノードの値の変更

nodeValueプロパティを使う。

document.getElementsByTagName("p")[0].childNodes[0].nodeValue="変更された文章";

属性の変更と参照

要素中の属性を変更するにはsetAttribute()メソッドを使う。
最初の引数は属性名で、２番目の引数は属性の値。

docuement.getElementsByTagName("img")[0].setAttribute("src","1.jpg");

属性の値を参照するにはgetAttribute()メソッドを使う。
引数に属性名を指定する。

document.getElementsByTagName("img")[0].getAttribute("src");

要素ノードの生成

新しく要素ノードを作るにはcreateElement()メソッドを使う。引数に要素名を指定する。

document.createElement("img");

テキストノードの生成

createTextNode()メソッドを使う。引数にはテキストノードの値を指定する。

document.createTextNode("comment");

子ノードの追加

新しく作ったノードはそのノードの親となるノードからappendChild()メソッドを使って子ノードとして追加することによって、初めてブラウザ上に表示される。
引数として子ノードとなるべきノードの参照を受け取る。新しい子ノードは親ノードの最後の子ノードとして追加される。

var para=document.createElement("p");
var setsumei=document.createTextNode(comment);
para.appendChild(setsumei);

子ノードを削除

removeChild()メソッドを使う。このメソッドは親ノードから呼び出し、引数として子ノードの参照を指定する。
parentNodeプロパティは親ノードの参照。

function deleteThisP(node){
    node.parentNode.removeChild(node);
}
<p>
段落を<a href="" onclick="deleteThisP(this.parentNode); return false;">削除</a>
</p>