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

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

要素の属性値を取得・設定

var name = elem.getAttribute("name"));
elem.setAttribute("href", "http://www.yahoo.co.jp/");

直下の子ノードリスト - 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);

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

Last-modified: 2011-08-05 (金) 04:33:20 (2088d)