山傘のプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

改訂新版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);
}