javascriptDOMの操作

javascript

DOMとは

DOM( Document Object Model )はHTMLやXMLを取り扱うためのAPIのこと。 DOMを使えば、HTMLの探索やスタイルの変更・イベントの設定・HTML要素の取得の他に、振る舞いを変えたり、ユーザー操作時の処理を設定することができる。

htmlを用意する

DOMを操作するにはidやclassが必要
テキストエリアとボタンを作成

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>DOM1</title>
  <style>
  </style>
</head>
<body>
    <textarea id="textarea"></textarea>
    <button id="button">ボタン</button>
</body>
</html>

以下のように表示される

練習: ボタンをクリックしたらテキストの入力値を取得しアラートとして表示させるようにする

scriptタグを追加し、要素を記述していく。

~
<body>
    <textarea id="textarea"></textarea>
    <button id="button">ボタン</button>
    
    <script>
        'use strict';
    const button = document.getElementById('button')
    button.addEventListener('click', () => {
    　　const textarea = document.getElementById('textarea')
    　　alert(textarea.value)
    })
    </script>
</body>
~

documentオブジェクト

documentには、HTML、CSS、JavaScriptなど全体のドキュメントが入っている。
documentオブジェクトで要素を取得し、変数buttonへ代入する。
getElementById('button')でbuttonというidの要素を取得する。idはDOMツリー中で一意である必要がある。
コンソールに入力すると、#documentという、HTMLファイル内の情報全てを取得することができる。

イベントトリブンの設定

イベントドリブンとは、なんらかのアクション（ボタンをクリックする、画面のリロード、など）をしたら何かが起きる処理のこと。
先程定義したDOMに対して、addEventListenerを設定してあげることでイベントを仕掛けることができる。
button.addEventListener('click', () => { })でbuttonをクリックしたときのイベントを設定できる。

テキストの入力値を取得してアラート表示させたいので、テキストのDOMを取得する。
const textarea = document.getElementById('textarea')
alert(textarea.value)valueで入力値を取得。
これで、アラートが表示されるようになる。