* DOM関数 [#ed983faf]
*** IDから要素を1つ取得 - document.getElementByID(id) [#p43ffdf7]
var elem = document.getElementByID("id");
*** タグ名から要素リストを取得 - elem.getElementsByTagName(name) [#yb5d6012]
var inputs = document.getElementsByTagName("input");
for ( var i = 0, n = inputs.length; i < n; i++ ) {
var input = inputs[i];
console.log(input.name);
}
var ul = document.getElementById("ul-id");
var li = ul.getElementsByTagName("li")[0];
** 要素の属性値を取得・設定 [#n3a2c226]
elem.getAttribute(name)
var name = elem.getAttribute("name"));
elem.setAttribute(name, "value")
elem.setAttribute("href", "http://www.yahoo.co.jp/");
*** 直下の子ノードリスト - elem.childNodes [#q289edd0]
var nodes = document.body.childNodes;
for ( var i = 0, n = nodes.length; i < n; i++ ) {
console.log(i + ": " + nodes[i]);
}
# <html><body>
# abc
# <div><p>...</p></div>
# xyz
# </body></html>
#
# 0: [object Text] ( abc )
# 1: [object HTMLDivElement]
# 2: [object Text] ( xyz )
*** 直下の最初の子ノード - elem.firstChild [#rad7aa90]
childNodes[0]と同じ。
*** 要素を作る - document.createElement(name) [#w0e99eea]
var div = document.createElement("div");
*** テキストノードを作る - document.createTextNod(text) [#nd26b07a]
var text = document.createTextNode("abc");
*** 子ノードの最後にノードを追加する - elem.appendChild(node) [#v7300bf6]
var div = document.createElement("div");
var t1 = document.createTextNode("this ");
var t2 = document.createTextNode("is ");
var t3 = document.createTextNode("a pen.");
div.appendChild(t1);
div.appendChild(t2);
div.appendChild(t3);
document.body.appendChild(div);
*** 子ノードの前にノードを追加する - elem.insertBefore(node) [#c0436912]
var li = document.createElement("li");
li.appendChild(document.createTextNode("0"));
var ul = document.getElementsByTagName("ul")[0];
ul.insertBefore(li, ul.firstChild);
*** ノードをchildNodesから削除する - elem.removeChild(node) [#k61b9624]
var ul = document.getElementsByTagName("ul")[0];
var li = ul.getElementsByTagName("li")[0];
ul.removeChild(li);
削除されるノードはchildNodesでなければならないので、あるノード内の全てのノードを再帰的に削除する場合、firstChildを使って以下のようにする。
var div = document.getElementsByTagName("div")[0];
while ( div.firstChild ) div.removeChild(div.firstChild);
