HTMLElementオブジェクト

HTML要素との関係

たいていのHTML要素はHTMLElementオブジェクトですが、いくつかの要素にはそれを継承した独自のオブジェクトが定義されています。

独自のオブジェクトが定義されているHTML要素
オブジェクト HTML要素 DOMレベル
HTMLHtmlElement html Level 0
HTMLAnchorElement a
HTMLAreaElement area
HTMLLinkElement link
HTMLBodyElement body
HTMLTitleElement title
HTMLFormElement form Level 2 HTML
HTMLFrameElement frame
HTMLIFrameElement iframe
HTMLImageElement img
HTMLInputElement input
HTMLSelectElement select
HTMLOptionElement option
HTMLTableElement table
HTMLTableRowElement tr
HTMLTableCellElement th
td
HTMLTextareaElement textarea
HTMLScriptElement script  
Web APIs | MDN Elements (Internet Explorer) | MSDN

HTMLの命名規則

  • HTMLインターフェイスのプロパティは小文字で記述する。
  • HTMLインターフェイスのプロパティが複数の単語から構成される場合は、2語目以降の単語の先頭文字は大文字で記述する。
  • HTML属性名がJavaScriptキーワードと同一になる場合には、「html」という文字列を先頭に追加する。ただしclass属性はclassNameとする。
命名規則の例外
HTMLの属性名 JavaScriptのプロパティ名
for htmlFor
class className

プロパティ

className (クラス名)

HTMLのclass属性の値を、HTMLElement.classNameプロパティから制御できます。2つ以上のクラスを設定するときには、HTMLで記述する場合と同様に、クラス名を空白文字で区切って記述します。

メソッド

メソッド名 説明
click 要素へマウス クリックイベントを送る
blue 現在フォーカスされている要素から、フォーカスを外す
focus 要素にフォーカスを合わせる ※1
※1 現在フォーカスがある要素は、Document.activeElementで取得できます。またInputオブジェクトには、要素のテキストを選択したうえでフォーカスを移す、selectメソッドもあります。

click()

クリックを模擬できます。

element.click()
HTMLElement.click() - Web API Interfaces | MDN
button.onclick = function( event )
{
    alert( event.target.tagName + ' がクリックされた' );
}

anchor.onclick = function( event )
{
    button.click();
    return false;
}