トップ 差分 一覧 Farm ソース 検索 ヘルプ RSS ログイン

DOMメソッド

DOMメソッド

[JavaScript]
最終更新時間:2010年06月03日 22時46分02秒

DOMメソッドとは

JavaScriptでDOMを利用できるようにいくつかのオブジェクトにDOMの使用に従ったメソッドが用意されている。
(よくわかってないので日本語もおかしいw)

そもそもDOMとは

調べよう。。

DOMメソッド一覧

 documentのDOMメソッド

documentオブジェクトのDOMメソッド
メソッド 機能
createAttribute(name) 名前がnameの属性を作成
createComment(cmnt) 指定したコメントを作成
createElement(name) nameで指定した名前の新しいDOMノードを作成
createTextNode(text) textを内容とする新しいDOMノードを作成
getElementById(id) idで指定した要素を取得
getElementByName(name) nameで指定した名前の要素をすべて取得
getElementByTagName(tagname) tagnameで指定したタグの要素をすべて取得

■DOM

■DOM基礎
要素オブジェクトを取り出す
○HTMLタグ名から要素を参照する

- getElementsByTagName

○id属性値から要素を参照する

- getElementById

○name属性値から要素を参照する

- getElementsByName

テキストノードを取り出す

- childNodes

テキストを取り出す

- nodeValue

■子要素を参照する

- childe

■エラー処理
○getElementsByTagName
タグ名の要素が存在しない場合は空のNodeListを返すため、lengthプロパティを使ってエラーハンドリングをする。

○子要素の存在確認

- hasChildNodes

○テキストノードであるかの確認

- nodeType

返り値
要素ノード:1
属性ノード:2
テキストノード:3
コメントノード:8
ドキュメントノード:9

※他にもnodeNameとnodeValueがある。

○DOM
・テキストの追加方法
1.getElementByIdとかで入れめんとをとってくる
2.createTextNodeでテキストを作成する
3.appendChildを使って1,2を結びつける

・Elementの作成方法
1.createElementでelementを作成する

■Javascript

xmlHTTPRequest…Ajaxの機能を提供してリアルタイムにサーバとのやり取りを行うために必要な機能

DOM…リアルタイムにHTMLを書き換えていくための機能

○onload
・ページ読み込み時に読み込む

○onunload
・ページ移動時に読み込む

○onclick
・クリックされたときに読み込む

○onmouseover
・マウスが乗った時に読み込む

○onmouseout
・マウスが離れた時に読み込まれる

○element.cloneNode
エレメントをを複製する

○element.style.left
左位置からの距離を設定する

○element.style.top
上位置からの距離を指定する

○element.appendChild
指定した要素へ子要素を追加する

○innerHTML
テキストをダイナミックに変更できる

○innerText
テキストをダイナミックに変更できる
innerTextはタグ内のテキストが対象になるがinnerHTMLは指定したタグより内側のHTMLが対象になる

例:
<div id="hoge"><b>fuga</b></div>

innerHTML:<b>fuga</b>
innerText:fuga

○floor
小数点以下の数値を切り捨てる。
Math.floor(数値)

○random
0〜1の範囲で任意の乱数を発生させる。
Math.random()