Menu
Coddy logo textTech

getElementById

Coddyの「JavaScript DOM メソッド」コースのレッスン 3/13。

getElementById() 関数は、一致する id 属性を持つ最初の要素を取得します。例えば:

const element = document.getElementById("elementId");																					

上記は、elementId という id を持つ要素を取得し、それを element という名前の変数に保存します。

document プレフィックスに注目してください。これは HTML ファイルの DOM です。

要素を取得した後は、JavaScript を使って操作できます!

最初に学習するプロパティは、要素のテキスト内容を保持する textContent です。次のようにテキストを変更できます:

const element = document.getElementById("elementId");
element.textContent = "some text";

このコードの後、#elementId のテキストは some text になります。 

challenge icon

チャレンジ

簡単

IDを持つ見出しを含むHTMLコードが与えられています。

JavaScriptのみを使用して、この要素のテキストを “Hello!” に変更してください:

  1. getElementById 関数を使用して要素を取得します。
  2. textContent プロパティを使用して要素のテキストを変更します。

自分で試してみよう

<!DOCTYPE html>
<html>
    <body>
        <h1 id="heading">Welcome!</h1>
        <script src="script.js"></script>
    </body>
</html>

JavaScript DOM メソッドのすべてのレッスン