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()などを使って取得したオブジェクトを使う。