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 になります。
チャレンジ
簡単IDを持つ見出しを含むHTMLコードが与えられています。
JavaScriptのみを使用して、この要素のテキストを “Hello!” に変更してください:
getElementById関数を使用して要素を取得します。textContentプロパティを使用して要素のテキストを変更します。
自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<h1 id="heading">Welcome!</h1>
<script src="script.js"></script>
</body>
</html>