DOMメソッドのチートシートまとめ

javascript


おもなDOM操作で使用するメソッドのチートシートを読んでみました。

使用したチートシートはこちら
http://www.wait-till-i.com/stuff/JavaScript-DOM-Cheatsheet.pdf




要素の取得



document.getElementById('id')

　→指定したIDの値を取得
document.getElementsByTagName('tagname')

　→指定したタグの値を取得




要素の属性、ノードの値とその他を取得



node.getAttribute('attribute')

　→エレメントの属性を取得
node.setAttribute('attribute')

　→属性値の設定
node.nodeType

　→ノードの種類を整数値で取得
node.nodeName

　→ノードの名前を取得
node.nodeValue

　→








node.previousSibling

　→対象となるノードの直前にある兄弟ノード
node.nextSibling

　→対象となるノードの直後にある兄弟ノード
node.childNodes

　→与えられた要素の子ノードの collection を取得
node.parentNode

　→DOM ツリー内で指定されたノードの親ノードを取得






document.createElement('Tagname')

　→指定のタグ名で要素を生成します
document.createTextNode

　→
newNode = node.cloneNode

　→現在のノードの複製を作成
node.appendChild

　→特定の親ノードの子ノードリストの末尾にノードをを追加

　　追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ

　　新しい親ノードに追加される
node.insertBefore

　→
node.removeChild

　→
elemnt.innerHTML

　→



ごちゃっといろいろサンプル(適当だし自作)



previousSibling[兄弟ノードとは、同じ階層にあるタグの事]

var element = document.getElementById('toptxt').childNodes[0].childNodes[1];
console.log(element.previousSibling);

console.log(element.nextSibling);





document.createElement[()の中には属性を記述するaとかdivとか]

→appendChildと一緒に使う
var objBody = document.getElementsByTagName("body").item(0);
var element = document.createElement('input');

objBody.appendChild(element);
var text = document.createTextNode('input');

objBody.appendChild(text);



element.cloneNode[何故かtrue渡さないと実行できない]

newNode = element.cloneNode(true);

console.log(newNode.nodeName);