* 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);

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS