jQueryを使わない場合の要素取得方法

• 公開日 : 2014年2月12日
• カテゴリ : Web制作

前々回の記事ではjQueryを使用した場合のDOM要素の取得方法をまとめたが、今回はjQueryを使わない場合を記しておこうと思います。

参考記事：jQueryを使用する場合の要素取得方法

https://www.firstsync.net/archives/5426

親を取得

親を取得

エレメント.parentNode;

エレメントにはgetElementById()などを使って取得したオブジェクトを使う。

子を取得

子を取得

エレメント.childNodes;

エレメントにはgetElementById()などを使って取得したオブジェクトを使う。
ノードリストで取得されるので、各要素にアクセスする場合はノードリスト.[インデックス番号]やノードリスト.item(インデックス番号)のようにしてアクセスする。

子要素のうち、最初のものを取得

エレメント.firstChild;

エレメントにはgetElementById()などを使って取得したオブジェクトを使う。

子要素のうち、最後のものを取得

エレメント.lastChild;

エレメントにはgetElementById()などを使って取得したオブジェクトを使う。

兄弟を取得

直前の要素(兄)を取得

エレメント.previousSibling;

エレメントにはgetElementById()などを使って取得したオブジェクトを使う。

直後の要素(弟)を取得

エレメント.nextSibling;

エレメントにはgetElementById()などを使って取得したオブジェクトを使う。