☰
kazugramming Let's program together

DOM2

Javascript

こんにちはkazutoです。今回は、実際にノードを取得をしてフロント部分に変化を加えていこうと思います。

事前準備

まず初めに今回の実装に使う、

  • HTMLファイル
  • CSSファイル
  • jsファイル

を準備をしましょう。

[イメージ]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="index.js"defer></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class = "block">
    <div class = "ChildElement"id="ChildElement">
      <p class = "GrandchildElement"> </p>
    </div>  
  </div>
</body>
</html>
.block{
  width: 800px;
  height: 800px;
  background-color:violet;
  display: flex;
  justify-content: center;
  margin: auto;
}

.ChildElement{
  width: 400px;
  height: 400px;
  background-color: brown;
  margin: auto;
}

.active {
  display: none;
}
  • HTML
  • CSS

の準備ができました。続いてHTMLファイルにjsファイルが読み込まれているか、確認をするため、デバッグを行います。

console.log("test")

読み込まれていればコンソールに出力結果が出るはずです。

コンソール結果にtestと文字列が出力をしていれば、HTMLファイルに無事にjsファイルが読み込まれています。

ノードを取得

事前準備が終わりましたので、ノードを取得をしていきます。ノードを取得をする方法は、いくつかありますが、今回は、querySelectorメソッドを用いて、ノードを取得していきます。

const block             = document.querySelector(".block")
const ChildElement      = document.querySelector("# ChildElement")
const GrandchildElement = document.querySelector("p")

今回は定数にノードの取得結果を格納しています。定数を用いる理由は、ノードを取得をするために使うメソッド名などが長いためです。また、再起的にDOMにアクセスするので、定数に格納すると記述量が減り便利だからです。

定数を使う意図が理解できた所で、ノードを取得できたかをconsole.logを用いてデバックをしてみましょう。

let elements=[ block, ChildElement,GrandchildElement]
elements.forEach(element => console.log(element));

今回は、elementsという配列を作成してから、forEachメソッドを用いて、デバックをしてみました。

※DRY（重複したコードはだめ）という原則に基づいてデバックをしています。

フロントに変化を加えよう

ノードを取得をした所で、DOM操作をしてフロントに変化を加えていきましょう。

  • 背景色を変える
  • テキストを挿入する
  • クラスを追加をする

背景色を変える

まず初めに定数block の背景色を変化をさせてみましょう。Javascript内で、背景色を変化させる方法は、styleメソッドを用います。なのでまず構文を確認をしてみましょう。

HTML要素 .style.プロパティ名

構文を確認をした所で実際にstyleメソッドを用いて背景色を変化させていきます。

block.style.backgroundColor = "white"

上記の記述で背景色が白になりました。

テキストを挿入する

続いて、Javascript内で生成した文字列を定数GrandchildElementに挿入をしていきましょう。テキストを挿入をするためにtextContentメソッドを使っていきます。

構文を確認をしてみましょう。

HTML要素.textContent = 要素

構文を確認をした所で実際にテキストを挿入をしてみます。

const text = "Javascript学習中"
GrandchildElement.textContent = text;

無事、テキストを挿入をする事ができました。

クラスを追加する

最後にクラスを追加をしてHTML要素を全て消してみましょう。

.active {
  display: none;
}

activeというクラスは、現在のどのHTML要素にも命名されていない状態です。なので定数ChildElementにactiveクラスを追加していきます。

クラスを追加する手順は

  1. classlistメソッドでクラスを追加をする準備をする
  2. addメソッドで任意のクラスを追加をする

という流れです。

classlistメソッドはclassを配列の様に扱えるメソッドです。

<div class = "class1 class2 class3 "></div>

addメソッドはクラスを追加するメソッドです。

手順を確認をした所で実際にクラスを追加をしていきます。

ChildElement.classList.add("active")

実際にクラスを追加されたか、コンソールで確認をしてみましょう。

classlistメソッドは、classを配列のようにあつかえるメソッドと先ほど解説しました。コンソール見て頂くと、配列でクラスを管理をしているのがわかると思います。

最終的にフロント部分は、真っ白になります。activeクラスを追加した事で、

display: none;

が適応され、要素を全て消したためです。

まとめ：DOM2

今回は、ノード取得をして実際に、フロントに変化を加えていきました。ポイントは、

  • styleメソッドはjs内でCSSを書く事ができる
  • textContent メソッドは要素を挿入する事ができる
  • classListメソッドはclassを配列の様に扱えるメソッド
  • addメソッドは任意のクラスを追加をする

他にもたくさんメソッドがあるので、興味がある方は是非調べてみてください。

以上、kazutoでした。

関連記事

DOM1

HOME >  Javascript >  DOM2