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
HTMLTableCellElement	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で記述する場合と同様に、クラス名を空白文字で区切って記述します。

参考

Properties - HTMLElement - Web API Interfaces | MDN

≫Elementオブジェクトのプロパティ

メソッド

メソッド名	説明
click	要素へマウスクリックイベントを送る
blur	現在フォーカスされている要素から、フォーカスを外す
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;
}

ここをクリックすると、左のボタンがクリックされます。