改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用までその8

Chapter 6 HTML や XML の文書を操作する - DOM (Document Object Model) -

この章では、DOM について学びます。あまり詳しく学んだことがないのでWeb についての知識を深めたいと思います。

getElementById

getElementById を使って id 値をキーに要素を取得します。ボタンを使って文字の色を変えます。

See the Pen GVvyaP by ヤマカサ (@yamakasa33) on CodePen.

getElementByTagName

特定のタグを持つ要素を取得できます。

// アンカータグを取得
var list = document.getElementsByTagName('a');
console.log(list);
var len = list.length;
for (var i = 0; i < len; i++) {
  console.log(list.item(i).href);
}

getElementsByClassName

クラスの名前によって要素を取得します。

var list = document.getElementsByClassName('my');
console.log(list);
var len = list.length;
for (var i = 0; i < len; i++) {
  console.log(list.item(i).href);
}