DOM2のHTML要素を簡単に紹介します。
全てのHTMLエレメントが持つインターフェイスです。
<div id="block" class="header" />
<script>
var el = document.getElementById("block");
alert(el.id); // "block"
alert(el.className); // "header"
</script>
このエレメントが持つIDです。
IDは、ドキュメント内でユニークである必要があります。
このエレメントが持つクラス名です。
ドキュメントのHTML要素が持つインターフェイスです。
interface HTMLHtmlElement implements HTMLElement;
この要素を取得するには以下のようにします。
var el = document.documentElement;
ドキュメントDTDのバージョンを返します。
が、まだ実装しているブラウザは少ないようです。
ドキュメントのHEAD要素が持つインターフェイスです。
interface HTMLHeadElement implements HTMLElement;
使用方法が不明です…
LINK要素が持つインターフェイスです。
<link id="id1" href="style.css" type="text/css" rel="stylesheet" />
<script>
var el = document.getElementById("id1");
alert(el.href); // "style.css"
alert(el.rel); // "stylesheet"
alert(el.type); // "text/css"
</script>
リンク先HREFを返します。
リンク先ファイルの種別を返します。
リンク先ファイルのContent-Typeを返します。
TITLE要素が持つインターフェイスです。
interface HTMLTitleElement implements HTMLElement;
タイトル文字列を返します。
META要素が持つインターフェイスです。
interface HTMLMetaElement implements HTMLElement;
content属性を返します。
http-equiv属性を返します。
name属性を返します。
scheme属性を返します。
BASE要素が持つインターフェイスです。
interface HTMLBaseElement implements HTMLElement;
基準URIを返します。
デフォルトのターゲットフレーム名を返します。
ISINDEX要素が持つインターフェイスです。
interface HTMLIsIndexElement implements HTMLElement;
DOM2において、ISINDEX要素は deprecated(非推奨) となっています。
よって、ここでは扱いません。
STYLE要素が持つインターフェイスです。
interface HTMLStyleElement implements HTMLElement;
この要素のdisabled属性を返します。
BODY要素が持つインターフェイスです。
interface HTMLBodyElement implements HTMLElement;
リンクがアクティブなときの色を定義します。
未訪問リンクの色を定義します。
既に訪問したリンクの色を定義します。
背景イメージを定義します。
背景色を定義します。
文字色を定義します。
FORM要素が持つインターフェイスです。
interface HTMLFormElement implements HTMLElement;
フォーム内のn(0～)番目にあるエレメントを返します。
以下の2文は同じ結果を返します。
el[n] el.elements.item(n)
フォーム内にあるエレメント一覧を返します。
戻り値の型は HTMLCollection です。
フォーム内にあるエレメントの数を返します。
name属性値を返します。
action属性値(SUBMIT時のURL)を返します。
enctype属性値を返します。
method属性値を返します。
targetを返します。
属性値で指定されていればその値、
指定されていなければBASE要素の値が使われます。
SUBMIT処理を行います。SUBMITボタンを押したときと同じ動作です。
RESET処理を行います。RESETボタンを押したときと同じ動作です。
SELECT要素が持つインターフェイスです。
interface HTMLSelectElement implements HTMLElement;
n(0～)番目にあるOPTION要素を返します。
単一のアイテムのみ選択可能な場合は "select-one"、
複数のアイテムを選択可能な場合は "select-multiple" を返します。
選択されているアイテムのインデックス(0～)を返します。
このプロパティに値を代入した場合、画面上でそのアイテムが選択されます。
選択されているアイテムの文字列を返します。
このプロパティに値を代入した場合、画面上でその文字列に対応するアイテムが選択されます。
対応するアイテムが存在しない場合は何もしません。
アイテムの数を返します。
所属するFORM要素を返します。
どのFORMにも所属しない場合は null を返します。
アイテム一覧を返します。型は HTMLOptionsCollection です。readonly
複数のアイテムを選択可能かどうかを返します。型は boolean です。
name属性値を返します。
size属性値を返します。
これは、一度に表示されるアイテム数です。
属性値が存在しない場合の戻り値は不明です(ブラウザにより異なる)。
tabIndex属性値を返します。
この要素のdisabled属性を返します。
アイテム element を、before の前に追加します。
index (0～)番目のアイテムを削除します。
このエレメントからフォーカスを外します。
このエレメントにフォーカスを当てます。
OPTGROUP要素が持つインターフェイスです。
interface HTMLOptGroupElement implements HTMLElement;
label属性値を返します。
この要素のdisabled属性を返します。
OPTION要素が持つインターフェイスです。
interface HTMLOptionElement implements HTMLElement;
<select id="kSel">
<option value="server-string">client-string
</select>
<script>
var opt = getElementById("kSel")[0];
alert(opt.text); // "client-string"
alert(opt.value); // "server-string"
</script>
所属するFORM要素を返します。
どのFORMにも所属しない場合は null を返します。
このアイテムの表示文字列を返します。
このアイテムの内部文字列を返します。
このアイテムがデフォルトで選択されていた場合に真を返します。readonly
このアイテムが現在選択されていた場合に真を返します。
このプロパティにtrueを代入した場合、画面上でそのアイテムが選択されます。
この要素のdisabled属性を返します。
INPUT要素が持つインターフェイスです。
interface HTMLInputElement implements HTMLElement;
この要素が持つデフォルト値を返します。
初回読み込み時やRESET時、要素の値はこの値に初期化されます。
type = TEXT / FILE / PASSWORD 要素でのみ有効です。
この要素がデフォルトで選択されていたかどうかを返します。
初回読み込み時やRESET時、要素のチェック有無はこの値に従います。
type = RADIO / CHECKBOX 要素でのみ有効です。
所属するFORM要素を返します。
accept属性値を返します。
この値は、送信するデータのMIMEタイプの候補リストをカンマで区切って指定したものです。
type = FILE 要素でのみ有効です。
accessKey属性値を返します。
この値は、キーボードショートカットを定義します。
例えば、accessKey = "X" としておけば、キーボードでAlt + Xを押したときに
この要素にフォーカスが移動します。
携帯端末上では、accessKey = "1" としておけば、「1」キーを押したときに
この要素にフォーカスが移動します。
align属性値を返します。
この値は、この要素を表示する位置を定義します。
type = IMAGE 要素でのみ有効です。
alt属性値を返します。
この値は、この要素が表示できなかった場合の代替テキストを定義します。
type = IMAGE 要素でのみ有効です。
この要素がチェックされている場合に真を返します。
type = RADIO / CHECKBOX 要素でのみ有効です。
この要素のdisabled属性を返します。
maxLength属性値を返します。
この値は、入力可能な最大文字列を定義します。
type = TEXT / PASSWORD 要素でのみ有効です。
name属性値を返します。
size属性値を返します。
src属性値を返します。
この値は、イメージのURLを定義します。
type = IMAGE 要素でのみ有効です。
tabIndex属性値を返します。
type属性値を返します。
"text" や "submit" など、全て小文字です。
useMap属性値を返します。
この値は、クリッカブルマップで使用するマップ名を定義します。
value属性値を返します。
このエレメントからフォーカスを外します。
このエレメントにフォーカスを当てます。
エレメント内の文字列を全て選択します。
type = TEXT / FILE / PASSWORD 要素でのみ有効です。
このエレメントをクリックします。
type = BUTTON / CHECKBOX / RADIO / RESET / SUBMIT 要素でのみ有効です。
TEXTAREA要素が持つインターフェイスです。
interface HTMLTextAreaElement implements HTMLElement;
この要素が持つデフォルト値を返します。
初回読み込み時やRESET時、要素の値はこの値に初期化されます。
所属するFORM要素を返します。
accessKey属性値を返します。
cols属性値を返します。
この値は、エレメントの横幅を文字数単位で定義します。
disabled属性値を返します。
name属性値を返します。
readOnly属性値を返します。
この値を true にすると、エレメントは入力不可状態になります。
rows属性値を返します。
この値は、エレメントの縦幅を文字数単位で定義します。
tabIndex属性値を返します。
type属性値 "textarea" を返します。
value属性値を返します。
このエレメントからフォーカスを外します。
このエレメントにフォーカスを当てます。
エレメント内の文字列を全て選択します。
BUTTON要素が持つインターフェイスです。
interface HTMLButtonElement implements HTMLElement;
所属するFORM要素を返します。
accessKey属性値を返します。
name属性値を返します。
tabIndex属性値を返します。
type属性値 "textarea" を返します。
value属性値を返します。
LABEL要素が持つインターフェイスです。
interface HTMLLabelElement implements HTMLElement;
LABEL要素は、フォーム部品(INPUTなど)とラベル(文字列)を結び付けるために使います。
所属するFORM要素を返します。
accessKey属性値を返します。
for属性値を返します。
この値は、結び付けるフォーム部品のIDを定義します。
FIELDSET要素が持つインターフェイスです。
interface HTMLFieldSetElement implements HTMLElement;
FIELDSET要素は、フォーム部品を(見た目上)グループ分けするために使います。
所属するFORM要素を返します。
LEGEND要素が持つインターフェイスです。
interface HTMLLegendElement implements HTMLElement;
LEGEND要素は、FIELDSET要素で見出しを定義するときに使います。
<form action="xxx.cgi">
<fieldset>
<legend>使用環境</legend>
<div>OS： <input type="text" name="OS"></div>
<div>ブラウザ： <input type="text" name="BROWSER"></div>
</fieldset>
<input type="submit" value="送信">
</form>
所属するFORM要素を返します。
accessKey属性値を返します。
align属性値を返します。
UL要素が持つインターフェイスです。
interface HTMLUListElement implements HTMLElement;
compact属性値を返します。
この値を true にすると、リストをコンパクトな形式で出力する…らしいです。
OL要素が持つインターフェイスです。
interface HTMLOListElement implements HTMLElement;
compact属性値を返します。
この値を true にすると、リストをコンパクトな形式で出力する…らしいです。
type属性値を返します。
この値は、リストのマークを定義します。
これがデフォルト。1, 2, 3, ...
a, b, c, ...
A, B, C, ...
i, ii, iii, ...
I, II, III, ...
start属性値を返します。
この値は、順序の開始番号を定義します。
DL要素が持つインターフェイスです。
interface HTMLDListElement implements HTMLElement;
compact属性値を返します。
DIR要素が持つインターフェイスです。
interface HTMLDirectoryElement implements HTMLElement;
DIR要素は、OLやDLなどと同じリストを表示する要素です。
compact属性値を返します。
MENU要素が持つインターフェイスです。
interface HTMLMenuElement implements HTMLElement;
MENU要素は、OLやDLなどと同じリストを表示する要素です。
compact属性値を返します。
LI要素が持つインターフェイスです。
interface HTMLLIElement implements HTMLElement;
type属性値を返します。
value属性値を返します。
DIV要素が持つインターフェイスです。
interface HTMLDivElement implements HTMLElement;
align属性値を返します。
P要素が持つインターフェイスです。
interface HTMLParagraphElement implements HTMLElement;
align属性値を返します。
H1～H6要素が持つインターフェイスです。
interface HTMLHeadingElement implements HTMLElement;
align属性値を返します。
Q要素が持つインターフェイスです。
interface HTMLQuoteElement implements HTMLElement;
Q要素は、引用を表現するときに使います。
cite属性値を返します。
この値は、引用元のURLを定義します。
PRE要素が持つインターフェイスです。
interface HTMLPreElement implements HTMLElement;
width属性値を返します。
この値は、エレメントの横幅を定義します。
BR要素が持つインターフェイスです。
interface HTMLBRElement implements HTMLElement;
clear属性値を返します。
この値は、テキストの回り込み方法を定義します。
BASEFONT要素が持つインターフェイスです。
interface HTMLBaseFontElement implements HTMLElement;
color属性値を返します。
この値は、フォントの色を定義します。
face属性値を返します。
この値は、フォントの種類(Times New Romanなど)を定義します。
size属性値を返します。
この値は、フォントサイズを定義します。
FONT要素が持つインターフェイスです。
interface HTMLFontElement implements HTMLElement;
インターフェイスは HTMLBaseFontElement と同じです。
HR要素が持つインターフェイスです。
interface HTMLHRElement implements HTMLElement;
align属性値を返します。
noShade属性値を返します。
この値を true にすると、罫線は影を持たない形で表示されます。
size属性値を返します。
この値は、罫線の縦幅を定義します。
width属性値を返します。
この値は、罫線の横幅を定義します。
INS / DEL要素が持つインターフェイスです。
interface HTMLModElement implements HTMLElement;
cite属性値を返します。
この値は、ドキュメントの変更に関連するURLを定義します。
dateTime属性値を返します。
この値は、ドキュメントの変更日付を定義します。
A要素が持つインターフェイスです。
interface HTMLAnchorElement implements HTMLElement;
accessKey属性値を返します。
coords属性値を返します。
この値は、クリッカブルマップの座標を定義します。
shape属性値を返します。
この値は、クリッカブルマップの形を定義します。
href属性値を返します。
この値は、リンク先URLを定義します。
name属性値を返します。
rel属性値を返します。
この値は、リンク先ファイルの種別を定義します。
rev属性値を返します。
この値は、リンク先ファイルから見た現ファイルの関係を定義します。
tabIndex属性値を返します。
targat属性値を返します。
この値は、リンク先を開くフレーム(ウィンドウ)名を定義します。
type属性値を返します。
この値は、リンク先ファイルのMIMEタイプを定義します。
このエレメントからフォーカスを外します。
このエレメントにフォーカスを当てます。
IMG要素が持つインターフェイスです。
interface HTMLImageElement implements HTMLElement;
name属性値を返します。
align属性値を返します。
alt属性値を返します。
border属性値を返します。
width属性値を返します。
height属性値を返します。
hspace属性値を返します。
この値は、イメージの横方向の余白幅を定義します。
vspace属性値を返します。
この値は、イメージの縦方向の余白幅を定義します。
isMap属性値を返します。
この値を true にすると、サーバーサイドのクリッカブルマップを実現する…そうです。
useMap属性値を返します。
この値は、クリッカブルマップで使用するマップ名を定義します。
longDesc属性値を返します。
この値は、イメージの代替文章を載せたページのURLを定義します。
src属性値を返します。
この値は、イメージのURLを定義します。
OBJECT要素が持つインターフェイスです。
interface HTMLObjectElement implements HTMLElement;
所属するFORM要素を返します。
code属性値を返します。
この値は、Javaアプレットのクラス名を定義します。
align属性値を返します。
archive属性値を返します。
この値は、アーカイブされたリソース名をカンマ区切りで定義します。
border属性値を返します。
codeBase属性値を返します。
この値は、classid / data / archive の基準となるURLを定義します。
codeType属性値を返します。
この値は、classidで指定されたデータのContent Typeを定義します。
data属性値を返します。
この値は、データファイルのURLを定義します。
declare属性値を返します。
この値を true にすると、オブジェクトはロードだけされ実行はされません。
width属性値を返します。
height属性値を返します。
hspace属性値を返します。
vspace属性値を返します。
name属性値を返します。
standby属性値を返します。
この値は、オブジェクトをロード中に表示しておく文字列を定義します。
tabIndex属性値を返します。
type属性値を返します。
この値は、dataで指定したデータのMIMEタイプを定義します。
useMap属性値を返します。
このオブジェクトを含むドキュメントを返します。型は Document です。
PARAM要素が持つインターフェイスです。
interface HTMLParamElement implements HTMLElement;
name属性値を返します。
type属性値を返します。
valueTypeが"ref"の場合のみ有効です。
value属性値を返します。
valueType属性値を返します。
この値は、valueで指定した値の型を定義します。
APPLET要素が持つインターフェイスです。
この要素は deprecated になったいます。代わりに OBJECT 要素を使いましょう。
MAP要素が持つインターフェイスです。
interface HTMLMapElement implements HTMLElement;
この要素が持つAREA要素のリストを返します。型は HTMLCollection です。
name属性値を返します。
AREA要素が持つインターフェイスです。
interface HTMLAreaElement implements HTMLElement;
accessKey属性値を返します。
alt属性値を返します。
coords属性値を返します。
この値は、クリッカブルマップの座標を定義します。
shape属性値を返します。
この値は、クリッカブルマップの形を定義します
href属性値を返します。
この値は、この要素をクリックしたときのジャンプ先URLを定義します。
noHref属性が存在すれば true を返します。
true の場合、この要素をクリックしたとき何処にもジャンプしません。
tabIndex属性値を返します。
target属性値を返します。
この値は、ジャンプ先を開くフレーム(ウィンドウ)名を定義します。
SCRIPT要素が持つインターフェイスです。
interface HTMLScriptElement implements HTMLElement;
スクリプトの内容を文字列で返します。
将来使われるための予約属性です。
将来使われるための予約属性です。
スクリプトの文字セットを返します。
defer属性が存在すれば true を返します。
true の場合、このスクリプトが如何なるドキュメントも生成しない事をブラウザに明示します。
これによって、ブラウザの表示が高速になる可能性があります。
src属性値を返します。
この値は、外部スクリプトファイルのURLを定義します。
type属性値を返します。
この値は、スクリプト言語の種別を定義します。
TABLE要素が持つインターフェイスです。
interface HTMLTableElement implements HTMLElement;
テーブル内に定義されたCAPTION要素を返します。型は HTMLTableCaptionElement です。
テーブル内に定義されたTHEAD要素を返します。型は HTMLTableSectionElement です。
テーブル内に定義されたTFOOT要素を返します。型は HTMLTableSectionElement です。
テーブル内に存在する列を返します。
これにはTHEAD、HFOOT、およびTBODY内の全要素が含まれます。型は HTMLCollection です。
テーブル内のBODYに含まれる列を全て返します。
型は HTMLCollection です。
align属性値を返します。
bgColor属性値を返します。
border属性値を返します。
cellPadding属性値を返します。
この値は、単一セル中での空白スペースを定義します。
cellSpacing属性値を返します。
この値は、セル同士の空白スペースを定義します。
frame属性値を返します。
この値は、セル枠線の表示方法を定義します。
rules属性値を返します。
この値は、テーブル枠線の表示方法を定義します。
summary属性値を返します。
この値は、テーブルの使用目的などを説明する文章を定義します。
音声読み上げブラウザなどで使われるらしいです。
width属性値を返します。
THEAD要素を生成して返します。
既にTHEAD要素がある場合はそれをそのまま返します(再生成はしない)。
戻り値の型は HTMLElement です。
THEAD要素を(もしあれば)削除します。
TFOOT要素を生成して返します。
既にTFOOT要素がある場合はそれをそのまま返します(再生成はしない)。
戻り値の型は HTMLElement です。
TFOOT要素を(もしあれば)削除します。
CAPTION要素を生成して返します。
既にCAPTION要素がある場合はそれをそのまま返します(再生成はしない)。
戻り値の型は HTMLTableCaptionElement です。
CAPTION要素を(もしあれば)削除します。
テーブルに列を挿入します。
indexが 0 の場合、テーブルの先頭に列が挿入されます。
indexが 1 の場合、テーブルの2列目に列が挿入されます。
indexが -1 の場合、テーブルの最後に列が挿入されます。
戻り値の型は HTMLTableRowElement です。
テーブルから列を削除します。
indexが 0 の場合、先頭列を削除します。
indexが 1 の場合、2列目を削除します。
indexが -1 の場合、最終列を削除します。
CAPTION要素が持つインターフェイスです。
interface HTMLTableCaptionElement implements HTMLElement;
align属性値を返します。
COL要素が持つインターフェイスです。
interface HTMLTableColElement implements HTMLElement;
align属性値を返します。
char属性値を返します。
charOff属性値を返します。
span属性値を返します。
vAlign属性値を返します。
width属性値を返します。
THEAD / TFOOT / TBODY要素が持つインターフェイスです。
interface HTMLTableSectionElement implements HTMLElement;
align属性値を返します。
char属性値を返します。
charOff属性値を返します。
vAlign属性値を返します。
この要素が持つ全要素を返します。型は HTMLCollection です。
この要素に列を挿入します。
戻り値の型は HTMLTableRowElement です。
この要素から列を削除します。
TR要素が持つインターフェイスです。
interface HTMLTableRowElement implements HTMLElement;
この列のテーブル内インデックスを返します。
つまり、THEAD / TFOOT / TBODYをひっくるめた中での順序を返します。
この列のセクション内インデックスを返します。
つまり、THEAD / TFOOT / TBODY内のそれぞれで最初の要素は0になります。
この列に含まれるセル一覧を返します。型は HTMLCollection です。
align属性値を返します。
bgColor属性値を返します。
char属性値を返します。
charOff属性値を返します。
vAlign属性値を返します。
この要素にセルを挿入します。
戻り値の型は HTMLTableCellElement です。
この要素からセルを削除します。
TH / TD要素が持つインターフェイスです。
interface HTMLTableCellElement implements HTMLElement;
このセルが列内で何番目に存在するかを返します(0～)。
abbr属性値を返します。
この値は、セル内容の省略情報を定義します。
align属性値を返します。
axis属性値を返します。
bgColor属性値を返します。
char属性値を返します。
charOff属性値を返します。
colSpan属性値を返します。
headers属性値を返します。
height属性値を返します。
noWrap属性の存在有無を boolean 型で返します。
rowSpan属性値を返します。
scope属性値を返します。
vAlign属性値を返します。
width属性値を返します。
FRAMESET要素が持つインターフェイスです。
interface HTMLFrameSetElement implements HTMLElement;
cols属性値を返します。
rows属性値を返します。
FRAME要素が持つインターフェイスです。
interface HTMLFrameElement implements HTMLElement;
frameBorder属性値を返します。
longDesc属性値を返します。
marginHeight属性値を返します。
marginWidth属性値を返します。
name属性値を返します。
noResize属性値を返します。
scrolling属性値を返します。
src属性値を返します。
フレーム内部に含まれるドキュメントを返します。型は Document です。
IFRAME要素が持つインターフェイスです。
interface HTMLIFrameElement implements HTMLElement;
align属性値を返します。
frameBorder属性値を返します。
height属性値を返します。
longDesc属性値を返します。
marginHeight属性値を返します。
marginWidth属性値を返します。
name属性値を返します。
scrolling属性値を返します。
src属性値を返します。
width属性値を返します。
フレーム内部に含まれるドキュメントを返します。型は Document です。
HTML要素のリストが持つインターフェイスです。
リストのサイズを返します。
index番目のアイテムを返します。
index は 0～length の範囲である必要があります。
戻り値の型は Node です。
nameの名称を持つアイテムを検索して返します。
まず、リスト内でid属性がnameのものを探します。
無い場合、リスト内でname属性がnameのものを探します。
どちらも無い場合は null を返します。
戻り値の型は Node です。
OPTION要素のリストが持つインターフェイスです。
リストのサイズを返します。
index番目のアイテムを返します。
nameの名称を持つアイテムを検索して返します。