Javascriptで要素を取得する

IDセレクタの要素取得

var element = document.getElementById(id);

Classセレクタの要素取得

var elements = document.getElementsByClassName( class_name );
/* 指定セレクタ内（elem）での絞り込み */
var elements = elem.getElementsByClassName( class_name );
/* 複数指定も可能 */
var elements = document.getElementsByClassName( class_name1 class_name2 );

複数取得するので配列っぽい値が返ってくる。故に取得した値を何かするには「何番目の値か指定する」か「for文、forEach」などでぐるぐる回すかなどの後処理が必要。

タグ名から要素取得

var elements = document.getElementsByTagName( tag_name );

複数取得するので配列っぽい値が返ってくる。故に取得した値を何かするには「何番目の値か指定する」か「for文、forEach」などでぐるぐる回すかなどの後処理が必要。

name属性から要素取得

var elements = document.getElementsByName( name );

name属性だからinputなどのフォーム類に使えると思う。これも配列っぽい値で返ってくるようなので、取得した値を何かするには何番目の値か指定する。
※radioやcheckboxは複数になるため？複数の返り値になるのかな。

CSSセレクタにマッチする最初の要素取得

var element = document.querySelector( selectors );
/* 複数条件も可能 */
var element = document.querySelector( selectors1, selectors2 );

指定するセレクタにはidやclassの他に属性（styleやtypeなど）も指定出来るので便利。

CSSセレクタにマッチする要素をまとめて取得

var elements = document.querySelectorAll( selectors );
/* 複数条件も可能 */
var elements = document.querySelectorAll( selectors1, selectors2 );

指定するセレクタにはidやclassの他に属性（styleやtypeなど）も指定出来るので便利。複数取得するので配列っぽい値が返ってくる。故に取得した値を何かするには「何番目の値か指定する」か「for文、forEach」などでぐるぐる回すかなどの後処理が必要。

戻り値について

それぞれの関数で取得出来る値を調べると、HTMLCllectionやNodeList、またその中で動的、静的、生きている、生きていない…などいろいろな表現が出てくる。ざっくり派の自分がまとめるには少々しんどいけれど「JSの操作でDOMが書き換えられると、取得した値も変化する」のが「HTMLCollection（動的 or 生きている）」ってことらしい。NodeListはその逆で変化しない。ただし関数によっては動的なNodeListもある…ややっこしい！
要するに使う関数で取得出来る値の持ち方が違う…ってことなので

console.log( element ); //elementは取得した値

取得した値をブラウザのDeveloper Toolsで確認して何が取得出来ているのかを見るのが、手っ取り早く間違いない。