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

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

参考記事:jQueryを使用する場合の要素取得方法
https://www.firstsync.net/notebook/5426/

親を取得

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

子を取得

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

兄弟を取得

直前の要素(兄)を取得
エレメント.previousSibling;
エレメントにはgetElementById()などを使って取得したオブジェクトを使う。
直後の要素(弟)を取得
エレメント.nextSibling;
エレメントにはgetElementById()などを使って取得したオブジェクトを使う。