documentオブジェクト

memo

HTMLを書き換えて、要素を取得し、コンテンツを書き換える。
例：現在の日時を表示する

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
  <section>
    <!-- 書き換えたい部分のHTMLタグとそのコンテンツ -->
    <p id="choice">日時表示</p>
  </section>
  <script>
    //要素を取得、取得した要素のコンテンツを書き換える
    document.getElementById('choice').textContent = new Date();
  </script>
</body>
</html>

getElementByIdメソッド

documentオブジェクトのgetElementByIdメソッド。
HTMLタグの特定のid名を持つドキュメント要素を取得する。
id名は文字列で指定する必要があるので、シングルクォートで囲む。

document.getElementById('id名')

Elementオブジェクト

document.getElementById('id名')で取得した要素は、Elementオブジェクトと言い、独自のメソッドとプロパティを持つオブジェクトとして扱われる。
textContentは、Elementオブジェクトに用意されているプロパティ。

textContent（Elementオブジェクトのプロパティ）
取得した要素のコンテンツ（内容）を書き換える。

document.getElementById('id名').textContent = 書き替えたい文字列;


オブジェクトは表示画面を示すWindowオブジェクト、
レンタリングされたHTMLドキュメントを示すDocument オブジェクト、
ドキュメントの要素を示すElementオブジェクトがある。

window　…Windowオブジェクト
　document　…Documentオブジェクト
　　html　　　
　　　body
　　　　h1　　　…Elementオブジェクト
　　　　div　　　（<html>以下にある要素）
　　　　p




この記事が気に入ったらサポートをしてみませんか？