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