JavaScript 入門 | ドキュメントオブジェクトモデル | DOM 要素

Tags:

DOM 要素の選択

HTML 要素を扱うには、まず対象の要素を選択する必要がある。 JavaScript で特定の HTML 要素を選択する方法は次のとおりである。

  1. HTML タグ名による選択
  2. id による選択
  3. class による選択
  4. name 属性による選択
  5. CSS セレクターによる選択
  6. HTML オブジェクトコレクションによる選択

getElementsByTagName() メソッドは、HTML タグ名を使用して HTML 要素を選択する。

var selectedItem = document.getElementsByTagName("li"); // すべての <li> 要素を選択する。
for (var i = 0; i < selectedItem.length; i++) {
    selectedItem.item(i).style.color = "red"; // 選択されたすべての要素のテキスト色を変更する。
}

item() メソッドは、その HTML オブジェクトコレクションで渡されたインデックスに該当する要素を返す。
HTML 要素の style プロパティを利用すると、その要素の CSS スタイルを変更できる。

id による選択

getElementById() メソッドは、id を利用して HTML 要素を選択する。

var selectedItem = document.getElementById("even"); // id が "even" の要素を選択する。
selectedItem.style.color = "red"; // 選択された要素のテキスト色を変更する。

JavaScript で id を利用した選択は、その id を持つ要素のうち最初の1つだけを選択する。
したがって、複数の要素を選択したい場合は、タグ名やクラスなど別の方法を使用する必要がある。

class による選択

getElementsByClassName() メソッドは、クラス名を利用して HTML 要素を選択する。

var selectedItem = document.getElementsByClassName("odd"); // class が "odd" のすべての要素を選択する。
for (var i = 0; i < selectedItem.length; i++) {
    selectedItem.item(i).style.color = "red"; // 選択されたすべての要素のテキスト色を変更する。
}

name 属性による選択

getElementByName() メソッドは、HTML 要素の name 属性を利用して HTML 要素を選択する。

var selectedItem = document.getElementsByName("first"); // name 属性値が "first" のすべての要素を選択する。
for (var i = 0; i < selectedItem.length; i++) {
    selectedItem.item(i).style.color = "red"; // 選択されたすべての要素のテキスト色を変更する。
}

CSS セレクターによる選択

querySelectorAll() メソッドは、CSS セレクター(id、class、属性、属性値など)を利用して HTML 要素を選択する。

var selectedItem = document.querySelectorAll("li.odd"); // class が "odd" の要素のうち <li> 要素だけを選択する。
for (var i = 0; i < selectedItem.length; i++) {
    selectedItem.item(i).style.color = "red"; // 選択されたすべての要素のテキスト色を変更する。
}

querySelectorAll() メソッドは Internet Explorer 8 以前ではサポートされない。

HTML オブジェクトコレクションによる選択

HTML DOM が提供するオブジェクトコレクションを利用して、HTML 要素を選択できる。

var title = document.title; // <title> 要素を選択する。
document.write(title);

DOM 要素の内容変更

HTML DOM を利用すると、HTML 要素の内容や属性値などを簡単に変更できる。

HTML 要素の内容を変更するもっとも簡単な方法は、innerHTML プロパティを利用することである。

var str = document.getElementById("text");
str.innerHTML = "이 문장으로 바뀌었습니다!";

HTML 要素の属性名を利用すると、属性値も変更できる。

var link = document.getElementById("link");          // id が "link" の要素を選択する。
link.href = "/javascript/intro"; // その要素の href 属性値を変更する。
link.innerHTML = "자바스크립트 수업 바로 가기!";     // その要素の内容を変更する。

DOM 要素のスタイル変更

HTML DOM を利用すると、HTML 要素の style も簡単に変更できる。

style プロパティを利用して HTML 要素に CSS スタイルを適用する。

var str = document.getElementById("text");                 // id が "str" の要素を選択する。
function changeRedColor() { str.style.color = "red"; }     // その要素の文字色を赤色に変更する。
function changeBlackColor() { str.style.color = "black"; } // その要素の文字色を黒色に変更する。