XMLのDOM処理(参照編)の続きです。
HTMLをJavascriptで更新ときにDOMをよく使うので、そのまとめです。
SAMPLE
解説
<script type="text/javascript">
function testAppendChild(){
var h5Element = document.createElement('h5');
h5Element.innerHTML = 'h5';
document.body.appendChild(h5Element);
}
function testInsertBefore(){
var h3Element = document.createElement('h3');
h3Element.innerHTML = 'h3';
var h4Element = document.getElementsByTagName('h4')[0];
document.body.insertBefore(h3Element,h4Element);
}
function testRemoveChild(){
var h2Element = document.getElementsByTagName('h2')[0];
if(h2Element){
document.body.removeChild(h2Element);
}
}
</script>
●要素を作成
・createElement(tagName)
documentオブジェクトのメソッド。引数に要素名（タグ名）を指定する。
●要素を追加
・appendChild(element)
親要素から実行する。引数のオブジェクトが子ノードの一番最後に挿入される。
・insertBefore(element,targetElement)
親要素から実行する。第二引数で指定した子要素の手前に、第一引数の要素を挿入する。
・replaceChild(newNode, oldNode)
第二引数の子要素を第一引数の要素に置換する。
●要素を削除
・removeChild(element)
親要素から実行する。引数で指定した要素を削除する。
●属性の更新、削除
・setAttribute(name,value)
属性を設定する。第一引数が属性名、第二引数が属性値
・removeAttribute(name)
第一引数で指定した属性を削除する。
これだけ覚えておけば、もう充分なんじゃないかな。
PR
