目標

HTMLの要素を制御する方法を学び、右のようにボタンを押したら文字が表示されるサイトを作ろう！

DOM

DOM(Document Object Model)とは、HTMLの構造を表現したものです。
このDOMを通して、HTML内の要素を取り出したり、その取り出した要素を変更したり、また新たに要素を追加することができます。
DOMの操作はJavascriptで行われます。つまり<script>要素にDOMを操作するブロックを配置するということです。

要素にアクセス

では実際に要素を取得してみましょう。ここでは、idを使った方法を紹介します。右の写真を参考にしてください。
取得したいHTML要素（ここでは<div>）にあらかじめid属性を設定しておきます。そして、<script>要素で「id="　"の要素」ブロックを利用します。
ここで注意したいのが、「id="　"の要素」ブロックで取得したものは、単なる文字列ではなく、様々な要素の情報を含んでいるということです。この中から要素内の文章を取り出すために、「要素～の文章」ブロックを使いましょう。
これを「アラート」ブロックにくっつけて、<script>要素に入れましょう。<div>の中身が表示されるはずです！
ちなみに、「id="　"の要素」ブロックで取得した要素は、変数にセットすることもできます。必要であればセットしておきましょう。

イベントの設定

次は、ボタンを押したときに要素を変更する方法を学びましょう。
「～にイベント～が発生したとき」ブロックを使います。空欄には、取得した要素を入れます。ブロックの中身は、設定した要素に指定したイベントが発生したときに実行されます。
ここでは、ボタンを押したときにアラートを出してみましょう。右の写真を参考にしてください。
まず、要素を取得して空欄に入れます。次に、ブロックの中身にアラートを設置して、<script>要素に入れましょう。ボタンを押すとアラートが表示されるはずです。

イベント処理の中身

それでは、イベント処理の中身を変更してみましょう。
ここでやりたいことは、ボタンを押したときに、要素内の文章を変更することです。
これを行うためには、「～に～を代入」ブロックを使います。左の空欄には、取得した要素の文章を入れます。右の空欄には、ボタンを押したら表示される文章を入れます。
これを「～にイベント～が発生したとき」ブロックにくっつけて、<script>要素に入れましょう。ボタンを押すと、要素内の文章が変わるはずです。

実行

では、実際にボタンを押してみましょう。ボタンを押すと、要素内の文章が変わるはずです。
これで、HTMLの要素を制御する方法を習得できましたね！