【初心者向け】JavaScriptからHTMLを操作する。

プログラミング
この記事で得られること
  • JavascriptでHTMLを取得する
  • JavascriptでHTMLを変更する

本記事ではDOMという概念を用いて、

JavascirptからHTMLを操作していきます。

 

第一章の学習では、Javascriptの処理結果をコンソール出力するか、メッセージ表示するだけでした。

今回はついに、Javascriptの処理結果をHTML(Webページ)に表示してみましょう!

ついに画面の表示を変えれるんだね!!

DOMとは

JavaScriptでは、表示されたWebサイトを書き換えることができます。

その操作を支えるのが、DOMという技術です。

 

DOMは、ドキュメントオブジェクトモデルの略です。

つまり、ドキュメント(HTML)をオブジェクトとして扱えるのです。

オブジェクトってなんだっけ?って方は、以下記事で復習ですね!

参考記事

HTMLの入れ子構造

DOMの詳細に入る前に、まずHTML文章の構造をお話しておきます。

HTMLには以下のルールがあります

  • あるタグは別のタグに完全に含まれる
  • 一番外側にはhtml要素がある

このことから、HTML文書は、html要素を頂点とする親子関係で表せることになります。

この『入れ子構造』を頭にうっすら入れておいてください!

documentオブジェクト

HTMLの要素はdocumentオブジェクトというjavascript標準のオブジェクトに入っています。

みてみましょうか。以下のようにhtmlとJSを書いてください。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <title>Document</title>
</head>
<body>
    <h1 id="title">イージーな人生を歩みたい!</h1>
     <p id="element1">知識をつけて、楽に生きる</p>
     
     <ol id="ol1">
      <li>リスト1</li>
     </ol>

     <script type="text/javascript" src="sample.js"></script>
</body>
</html>

sample.js

console.log(document);

コンソールに、HTML要素が出力されているのがわかります。

このdocumentオブジェクトを使って、JSからHTMLを変更していきます!

DOMを使ってHTMLを取得する

DOMを使って、HTMLの<h1>タグの文字を取得してみます!

const h1 = document.getElementById(“title”); console.log(h1);

h1要素を取得できましたね。解説します

要素の取得には、documentオブジェクトの以下の関数を使用します

getElementById(id)

この関数を使って、idがtitleの要素を変数h1に入れてます。

getElementById(id)でHTML要素を取得できる

DOMを使ってHTMLを変更する

今度はHTMLを変更してみましょう!

index.htmlを以下のように変更しましょう

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <title>Document</title>
</head>
<body>
    <h1 id="title">イージーな人生を歩みたい!</h1>
     <p id="element1">知識をつけて、楽に生きる</p>
     
     <button id="button" onclick="titleChange()">タイトル変更</button>

     <ol id="ol1">
      <li>リスト1</li>
     </ol>

     <script type="text/javascript" src="sample.js"></script>
</body>
</html>

クリック時にtitleChange()関数を呼び出すボタンを追加しています。

titleChange()関数で、HTMLを変更する処理を書きましょう!

function titleChange(){
    const h1 = document.getElementById("title");
    h1.textContent = "チェンジ人生";
}

先ほどのように、変数h1にh1要素を入れます。

そして、textContentプロパティを変更すれば、テキストの内容を書き換える事ができます!

では、ボタンを押したらタイトルが変わることを確認しましょう!

取得したHTML要素のtextContentを変更することで、表示が変わる

DOMを使って要素を追加する

最後は少し難しいです。

DOMを使ってHTML要素を追加します。

先ほどのHTMLの、ボタンの部分だけ変更します。

<button id="button" onclick="insert()">li要素を追加</button>

では、insert()関数に、要素を追加する処理を追加していきます!

function insert(){
    //ol 要素を取得
    const ol1 = document.getElementById("ol1");
    //li要素の作成
    const li = document.createElement("li");
    //li要素の表示文字
    li.textContent = "子供"
    //ol要素の小要素に作成したli要素を追加する
    ol1.appendChild(li);
}

ボタンを押すごとに、li要素が追加されていきます!

では、ソースを解説します!

 

要素の作成には、createElement(tag_type)を使います。

今回は、<li>を作成し、textContent に”子供”を入れています。

そして、appendChild(element)を使って、

<ol>の小要素作成した<li>を追加しています

DOMのまとめ

用語説明
DOMHTMLをオブジェクトとして使う仕組み
documentオブジェクトHTMLの情報が入っているオブジェクト
getElementById(id)Idから要素を取得する関数
textContent表示する文字
createElement(tag_type)要素を作成する関数
appendChild(element)小要素に追加する関数

今回はたくさん用語がでてきましたね。

丸暗記するのではなく、ふんわりどんなことをしたかが理解できれば十分です。

 

DOMの操作については奥が深いので、実践編などで慣れていきましょう!

コメント