DOM

Last-modified: 2012-11-25 (日) 16:22:45

DOM

DOM探索

element.getElementsByTagName(タグ名): elementの配列

そのelementをトップとするツリー内から指定された名前の要素を検索する

document.getElementById(ID): element

指定されたidの要素を取得

element.childNodes: elementの配列

子供のノードの配列

element.tagName: 要素のタグ名

DOM変更

document.createElement(タグ名): element

新しいelementを作る

document.createTextNode(テキスト): node?

element.appendChild(node)

element.insertBefore(insertedNode,adjacentNode)

element.removeChild(node)

属性

element.setAttribute(属性名, 値)

element.getAttribute(属性名)

属性に保存できるデータの型

ブラウザにより異なる。

  • Chrome(バージョン 23)ではすべてstringに変換されて記録される。
  • IE(9)では、そのまま記録される。オブジェクトもOK。

以下のようなコードで確認できる。

<html>

<script>
function test() {
	var foo = document.getElementById("foo");

	foo.setAttribute("my:number", 123);
	foo.setAttribute("my:float", 123.45);
	foo.setAttribute("my:date", new Date());
	foo.setAttribute("my:obj", {prop1: "A", prop2: "B"});
	var numberValue = foo.getAttribute("my:number");
	var dateValue   = foo.getAttribute("my:date");
	var floatValue  = foo.getAttribute("my:float");
	var objValue    = foo.getAttribute("my:obj");

	document.write(numberValue + ": "    + (typeof numberValue) + "\n");
	document.write(floatValue + ": "     + (typeof floatValue) + "\n");
	document.write(dateValue + ": "      + (typeof dateValue) + "\n");
	document.write(objValue + ": "       + (typeof objValue) + "\n");
	document.write(objValue.prop1 + ": " + (typeof objValue.prop1) + "\n");
}
</script>
<body onload="test();">
<div id="foo"/>
</body>
</html>

その他

element.style: CSSStyleDeclaration

element.style.background="red" のように使う

element.innerHTML: 文字列

要素の内容をHTMLで表現したもの

プロパティの大文字小文字は区別されるので、innerHtmlと書いては駄目

(innerTextというのもあったような・・・)

参考

http://developer.mozilla.org/ja/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces