« 【JavaScript】 イベントハンドラをセットする | トップページ | 【JavaScript】 イベントリスナーの追加と削除 »

2006年6月 9日 (金)

【JavaScript】 DOMのメソッド・プロパティ

JavaScriptからHTML要素にアクセスする時はDOMを使用しますが、私自身がよく忘れるので、そこそこ使用頻度の高いメソッド・プロパティのプチリファレンスを書いておきたいと思います。

Documentのメソッド
Element createElement( tagName[string] )
説明:新しいElementオブジェクトを生成します。
引数:タグの名前を文字列で指定します。
戻り値:新たに生成されたElementオブジェクト
var elem = document.createElement("img");
NodeList getElementsByTagName( tagName[string] )
説明:タグの名前を指定して要素のリストを取得します。
引数:タグの名前を文字列で指定します。
戻り値:該当する要素のリスト。
var elements = document.getElementsByTagName("img");
Element getElementById( id[string] )
説明:id属性を指定して要素を取得します。
引数:id属性値を文字列で指定します。
戻り値:該当する要素。
var element = document.getElementById("ex1");
NodeList getElementsByName( name[string] )
説明:name属性を指定して要素のリストを取得します。
引数:name属性値を文字列で指定します。
戻り値:該当する要素。
var elements = document.getElementsByName("ex1");
Elementのプロパティ・メソッド
string nodeName
説明:要素の名前を取得します。読み取り専用です。
var name = document.getElementById("ex1").nodeName;
string nodeValue
説明:要素の値を取得します。読み取り専用です。
var value = document.getElementById("ex1").nodeValue;
Node parentNode
説明:親要素を取得します。読み取り専用です。
var parent = document.getElementById("ex1").parentNode;
NodeList childNodes
説明:子要素のリストを取得します。読み取り専用です。
var elements = document.getElementById("ex1").childNodes;
Node firstChild
説明:先頭の子要素を取得します。読み取り専用です。
var element = document.getElementById("ex1").firstChild;
Node lastChild
説明:最後の子要素を取得します。読み取り専用です。
var element = document.getElementById("ex1").lastChild;
Node previousSibling
説明:前の要素を取得します。読み取り専用です。
var element = document.getElementById("ex1").previousSibling;
Node nextSibling
説明:次の要素を取得します。読み取り専用です。
var element = document.getElementById("ex1").nextSibling;
string tagName
説明:タグの名前を取得します。読み取り専用です。
Node insertBefore( newNode[Node], refChild[Node] )
説明:このメソッドを使用すると、子要素を挿入する際に、挿入する場所を指定できます。
引数:newNode:挿入する要素、refChild:この要素の前に挿入されます。
戻り値:挿入された要素。
Node removeChild( oldChild[Node] )
説明:指定した子要素を削除します。
引数:削除する子要素。
戻り値:削除された子要素。
Node appendChild( newChild[Node] )
説明:子要素を要素リストの最後に追加します。
引数:追加する子要素。
戻り値:追加された子要素。
boolean hasChildNodes()
説明:子要素を持っているか調べることができます。
戻り値:子要素を持っていればtrue、そうでなければfalse。
Node cloneNode( isDeep[boolean] )
説明:要素をコピーします。
引数:trueを指定するとディープコピーとなり、falseならシャローコピーとなります。
戻り値:新たにコピーされた要素。
void removeAttribute( name[string] )
説明:属性を削除します。
引数:属性名。
string getAttribute( name[string] )
説明:属性の値を取得します。
引数:属性名。
戻り値:属性の値。
void setAttribute( name[string], value[string] )
説明:属性をセットします。
引数:name:属性名、value:属性値。
NodeList getElementsByTagName( name[string] )
説明:タグの名前を指定して、要素のリストを取得します。
引数:タグの名前を文字列で指定します。
戻り値:該当する要素のリスト。
var element = document.getElementById("ex1");
var elements = element.getElementsByTagName("img");
boolean hasAttribute( name[string] )
説明:要素が、指定した名前の属性を持っているかどうかを調べられます。
引数:調べたい属性名。
戻り値:持っていればtrueを返します

参考資料
Document Object Model (DOM) Level 1 Specification (W3C)
Document Object Model (DOM) Level 2 Core Specification (W3C)

|

« 【JavaScript】 イベントハンドラをセットする | トップページ | 【JavaScript】 イベントリスナーの追加と削除 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/10447992

この記事へのトラックバック一覧です: 【JavaScript】 DOMのメソッド・プロパティ:

» getElementById [getElementById]
【Spry,prototype.js】ドル関数を比較する CLEVER BBSのスキン改良<投稿及び検索フォームの表示/非表示ボタン設置> 【YUI,prototype.js】YUIのドル関数的メソッド 【JavaScript】超簡易$関数 getElementByIdをActionScriptで実装する Comentario de Flow - Days en ... [続きを読む]

受信: 2006年8月18日 (金) 20時33分

« 【JavaScript】 イベントハンドラをセットする | トップページ | 【JavaScript】 イベントリスナーの追加と削除 »