jQueryを使わないjavascriptでの要素取得方法とテキストの書き換え

今までなんとなーくで書いて、動くからまぁいいか。でやってきてたjavascriptをきちんと勉強しようと思うので、少しずつメモ書きをためていきます。 今回はhtmlドキュメントツリー内の「id」、「class」、「name」を指定して要素取得します。

IDでテキストを取得

getElementById

var test = document.getElementById('aaa').textContent;

idを指定して単一の要素を取得.textContentで要素内のテキストを抽出しています。

テキストを書き換え

document.getElementById('aaa').textContent = '書き換えしました';

=の左右を入れ替えることで要素内のテキストを書き換えることができます。

CLASSでテキストを取得

getElementsByClassName

var test = document.getElementsByClassName('bbb')[0].textContent;

classを指定して要素のコレクションを取得し、[0]で何番目の要素かを指定し、.textContentで要素内のテキストを抽出しています。 getElementsというふうに複数形になっているため、何番目の要素を取ってくるのかを指定する必要があるわけです。 プログラミングにおいては[0]から順にカウントしていくので、[0]で上から1番目の要素となり、[1]なら上から2番目の要素となります。

テキストを書き換え

document.getElementsByClassName('bbb')[0].textContent = '書き換えしました';

タグの名前を指定してテキストを取得

getElementsByTagName

var test = document.getElementsByTagName('a')[0].textContent;

タグ名で取得する場合もClassNameと同様にコレクションを取得するので、[0]で何番目かを指定します。

テキストを書き換え

document.getElementById('ccc').getElementsByTagName('a')[0].textContent = '書き換えしました';

親要素を指定して子要素のテキストを取得

getElementById.getElementsByTagName

var test = document.getElementById('ccc').getElementsByTagName('a')[0].textContent;

まず親要素を指定、さらにその中に含まれている子要素を取得します。

テキストを書き換え

document.getElementById('ccc').getElementsByTagName('a')[0].textContent = '書き換えしました';

nameでテキストを取得

getElementsByName

document.getElementsByName("ddd")[0].textContent;

テキストを書き換え

document.getElementsByName("ddd")[0].textContent = '書き換えしました';

↓この本で勉強中！

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

あくまで自分用のメモ書きのつもりですが、使えそうだったらコピペで使ってやってください。 なにか間違ってたりもっと良い方法があったら教えてくださいな。