JavaScript/DOM/DOM関数のバックアップ(No.2)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
JavaScript/DOM/DOM関数へ行く。
- 1 (2011-06-17 (金) 06:17:35)
- 2 (2011-06-17 (金) 07:55:27)

DOM関数

IDから要素を1つ取得 - document.getElementByID(id)

 var elem = document.getElementByID("id");

タグ名から要素リストを取得 - elem.getElementsByTagName(name)

 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];

要素の属性値を取得 - elem.getAttribute(name)

 var name = elem.getAttribute("name"));

直下の子ノードリスト - elem.childNodes

 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

childNodes[0]と同じ。

要素を作る - document.createElement(name)

 var div = document.createElement("div");

テキストノードを作る - document.createTextNod(text)

 var text = document.createTextNode("abc");

子ノードの最後にノードを追加する - elem.appendChild(node)

 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)

 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)

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