JavaScriptのイベントハンドラ一覧

投稿日:

JavaScriptのElementオブジェクトは、ドキュメント上の要素を表しています。

説明

Elementオブジェクトとは

Elementオブジェクトはドキュメント上の要素を表します。例えば下記は、a要素です。

<a href="https://syncer.jp/">SYNCER</a>

要素とタグの違い

要素をタグと表現しても大抵の場合、意味は伝わると思いますが厳密には違います。要素はタグで作ります。例えば、aタグでa要素を作ります。どういうことかというと下記がaの開始タグと、終了タグです。

<a>
</a>

aタグにhref属性を付けて、テキストを囲いました。この全体が要素です。タグは部品、要素は部品で構築された全体です。ネジと机みたいな関係をイメージして下さい。

<a href="https://syncer.jp/">SYNCER</a>

親要素と子要素

要素は複数の要素を含む場合があります。例えば下記は、3つのli要素を含んだul要素です。この場合、ul要素は各li要素の親要素、各li要素はul要素の子要素と表現します。

<ul>
	<li>人参</li>
	<li>じゃがいも</li>
	<li>玉ねぎ</li>
</ul>

Elementオブジェクトの取得

Elementオブジェクトの取得方法は様々です。例えば一番簡単で有名なのはgetElementById()。これはドキュメント上にある全ての要素の中から、特定のid属性を持つ要素を1つ取得するメソッドです。

<p><a id="anchor">SYNCER</a></p>
// id属性がanchorの要素を取得 ( → <a id="anchor">SYNCER</a> )
var aElement = document.getElementById( "anchor" ) ;

次は要素から要素を取得する方法です。このaElement(子要素)からp要素(親要素)を取得します。親要素を取得するには、子要素のparentNodeプロパティを参照します。

// a要素の親要素を取得 ( → <p><a id="anchor">SYNCER</a></p> )
var pElement = aElement.parentNode ;

最後に、pElement(親要素)からa要素(子要素)を取得してみましょう。子要素を取得するには、childNodesプロパティを参照します。

// p要素の子要素を取得 ( → <a id="anchor">SYNCER</a> )
var aElement = pElement.childNodes[0] ;

このように目的の要素を取得する方法は様々あるので、メソッドやプロパティを確認し、最適な方法を探してみて下さい。

Elementオブジェクトの更新

Elementオブジェクトは、更新することもできます。Elementオブジェクトの内容が更新されると、ブラウザの表示もそれに合わせてリアルタイムで変わります。例えば、ある要素の背景色を赤に変更したい場合は次の通りです。

// aElement = <a href="https://syncer.jp/">SYNCER</a>

// 要素の背景色を赤に変更 ( → <a href="https://syncer.jp/" style="background:red">SYNCER</a> )
aElement.style.backgroundColor = "red" ;

はたまた、要素にid属性を付けたい場合は次の通りです。

// aElement = <a href="https://syncer.jp/">SYNCER</a>

// 要素のid属性を変更 ( → <a id="syncer" href="https://syncer.jp/">SYNCER</a> )
aElement.id = "syncer" ;

取得だけでなく、更新に関してもたくさんのメソッド、プロパティが用意されています。駆使して、インタラクティブなウェブページを作成しましょう。

プロパティ

項目説明
Location.hashフラグメント識別子(#〜)を取得、変更する。
Location.hostホスト名とポートを取得、変更する。
Location.hostnameホスト名を取得、変更する。
Location.href完全なURLを取得、変更する。
Location.pathnameパスを取得、変更する。
Location.portポート番号を取得、変更する。
Location.protocolプロトコルを取得、変更する。
Location.searchクエリを取得、変更する。

メソッド

項目説明
Location.assign()コンテンツをロードして表示する。
Location.reload()ドキュメントをリロードする。
Location.replace()現在のURLを置換する。

関連項目

  • Location - ブラウザロケーションのオブジェクト。
  • Document.location - Locationオブジェクトを取得する。

外部リンク