Element - 要素を表すノード

投稿日:

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" ;

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

プロパティ

項目説明
attributes要素の全属性を取得する。
childElementCount子要素の数を取得する。
children全ての子要素を取得する。
classList全てのクラス名を≠配列で取得する。
classNameクラス属性を取得する。
clientHeight表示域の高さを取得する。
clientWidth表示域の横幅を取得する。
clientLeft表示域の左側の幅を取得する。
clientTop表示域の上側の幅を取得する。
datasetdata属性を取得、変更する。
firstElementChild最初の子要素を取得する。
idid属性を取得、変更する。
innerHTML要素のHTMLを取得、変更する。
isContentEditable要素が編集可能かを取得する。
langlang属性を取得、変更する。
lastElementChild最後の子要素を取得する。
localName要素のローカルな名前。
namespaceURI要素の名前空間を定めるURI。
nextElementSibling次の要素を取得する。
offsetHeight全体の高さを取得する。
offsetWidth全体の横幅を取得する。
offsetLeftオフセットの横幅を取得する。
offsetTopオフセットの高さを取得する。
offsetParentオフセット座標の基準となる要素を取得する。
outerHTML自身と中身のHTMLを取得、変更する。
prefix要素の名前空間接頭辞。
previousElementSibling前の要素を取得する。
scrollHeightスクロール分を含めた高さを取得する。
scrollWidthスクロール分を含めた横幅を取得する。
scrollLeft要素内の水平方向のスクロール量を取得、変更する。
scrollTop要素内の垂直方向のスクロール量を取得、変更する。
stylestyle属性のオブジェクトを取得する。
tagNameタグ名を取得する。
titletitle属性を取得、変更する。

メソッド

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

関連項目

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

外部リンク