トップ > ★JavaScript > DOMとは

DOMとは

★JavaScript

DOM（Document Object Model）

  • JavaScriptでWebページを扱う仕組み
    • WebブラウザがHTMLを読み込むと、レンダリングエンジンという機能が解釈してWebページを表示します
    • Webページの中の各部品を「要素（element）」といい、この要素をJavaScriptで操作します
オブジェクトを利用してHTMLを操作する
  • ツリー構造とも呼ばれる階層構造を取る
  • それぞれ「ノード」という言葉で説明される
  • Webページの各要素を表すElementオブジェクトにアクセスできます


  • Elementオブジェクトを追加・削除したり、Elementオブジェクトがもつ情報を変更したりすることで、JavaScriptでWebページを操作できます
  • このようにオブジェクトを使ってHTMLを操作する仕組みを「DOM（Document Object Model）」と呼びます

Locationオブジェクト

  • 現在表示されているページのロケーションに関する情報を提供する
  • 現在の表示URLアドレスに関する情報を取得できる

Historyオブジェクト

  • ブラウザの履歴の操作
  • 画面上に表示しているページの移動などの操作

  • ブラウザー名やバージョンなど、ブラウザ固有の情報を提供する

Screenオブジェクト

  • ディスプレイに関する情報を提供する

Formオブジェクト

  • Formに関する情報を提供する
  • Formの操作

Anchorオブジェクト

  • ページ上のアンカーに関する情報を扱う

Imagesオブジェクト

  • 画像に関する情報を提供する
  • 画像を操作する機能を提供する

Elementオブジェクト

  • ページ上のアンカーに関する情報を扱う

Webページの文字を変更する

  • HTMLドキュメントやXMLドキュメントにおける、要素（タグ）のこと
querySelectorメソッド
  • documentオブジェクト
  • CSSセレクタでHTML要素を指定することが可能
  • 「document.getElementById()」のほうが処理速度は速い
  window.document.querySelector

セレクターとは

  • 要素を選び出すときの「指示」になる文字列のこと
  const element = document.querySelector( '文字列' );
  • 「window」は、省略します
textContentで要素の中のテキストにアクセスする
  • テキストにHTMLを含まないのであれば、textContentプロパティのほうが innerHTMLプロパティより高速で、セキュリティ面でも安全
<body>
<h1>ここに表示</h1>
<script>
const str = 'JavaScriptで表示';
const element = document.querySelector( 'h1' );
element.textContent = str;
</script>
</body>
getElementByIdメソッド（id名をキーに要素を取得）
  • 指定した id名を持つ要素を１つ取得するメソッド
  • 指定した id名を持つ要素がなければ、nullを返す
<body>
<h1 id="result">JavaScriptで表示</h1>
<button onclick="show()">取得した値を表示</button>
<script>
function show() {
  const element = document.getElementById( 'result' );
  console.log( result );
  console.log( result.textContent );
}
</script>
</body>
getElementsByTagNameメソッド（タグ名をキーに要素を取得）
  • 指定したタグ名を持つ要素を取得するメソッド
  • 戻り値は、HTMLCollection（配列と似た構造データ）
  • 指定したタグ名を持つ要素がなければ、空のHTMLCollection( [] )を返す（nullではない点に注意）
<body>
<div>要素1</div>
<p>要素2</p>
<div>要素3</div>
<span>要素4</span>
<div>要素5</div>
<button onclick="showElements()">取得した値を表示</button>
<script>
function showElements() {
  const elements = document.getElementsByTagName( 'div' );
  for( let i=0; i<elements.length; i++ ) {
  console.log( elements[i].textContent );
  }
}
</script>
</body>
getElementsByClassNameメソッド（class属性をキーに要素を取得）
  • 指定した class属性を持つ要素を取得するメソッド
  • 戻り値は、HTMLCollection（配列と似た構造データ）
  • 指定した class属性を持つ要素がなければ、空のHTMLCollection( [] )を返す（nullではない点に注意）
<body>
<ul>
<li class="foo">要素1</li>
<li class="bar">要素2</li>
<li class="foo">要素3</li>
<li>要素4</li>
<li class="bar">要素5</li>
</ul>
<button onclick="showElements()">取得した値を表示</button>
<script>
function showElements() {
  const elements = document.getElementsByClassName( 'foo' );
  for( let i=0; i<elements.length; i++ ) {
  console.log( elements[i].textContent );
  }
}
</script>
</body>
getElementsByNameメソッド（name属性をキーに要素を取得）
  • 指定した name属性を持つ要素を取得するメソッド
  • ラジオボタン、チェックボックスなど name属性が等しい要素群の取得に利用
  • 戻り値は、HTMLCollection（配列と似た構造データ）
  • 指定した name属性を持つ要素がなければ、空のHTMLCollection( [] )を返す（nullではない点に注意）
<body>
<input type="text" name="result">
<button onclick="showElements()">取得した値を表示</button>
<script>
function showElements() {
  const elements = document.getElementsByName( 'result' );
  for( let i=0; i<elements.length; i++ ) {
  console.log( elements[0].value );
  }
}
</script>
</body>