【JavaScript】ハンズオン いくつかのメソッドを使えるようになる

2022.02.22

JavaScriptに不慣れな私が、他の方の書いたコードを見て、全然読み取れなかったため、挙動の確認をしつつ以下メソッドの使用例をまとめました。

  • .createElement
  • .className
  • .innerHTML
  • .getElementById
  • .querySelector
  • .append

まずはappendLabelという関数を実行します。

この関数には、受け渡し値が4つ設定されてます。

        appendLabel(
          2022-02-22,
          userId,
          ".D20220222",
          Label()
        );

関数の受け渡し値に関数が入っていますね。

この関数Labelの中身を見てみます。

function Label() {
  const label = document.createElement("div");
  label.className = "setClassName";
  label.innerHTML = "名前";
  return label;
}

この中でもたっぷりJavaScriptメソッドが使用されています。

この関数によりできる（returnされる）のが以下のdiv要素になります。

<div class="setClassName">名前</div>

なので、一番最初に実行されたappendLabelは実際は以下のようになります。

        appendLabel(
          2022-02-22,
          userId,
          ".D20220222",
          <div class="setClassName">名前</div>
        );

上記の第3引数の、Dの前の.はclassを意味します。こう指定することで、class名を指定できます。

それではappendLabel関数で何が行われているのか見てみましょう！

  function appendLabel(index, selectorId, selector, label) {
    if (index !== undefined) {
      if (document.getElementById(selectorId).querySelector(selector) != null) {
        documenta
          .getElementById(selectorId)
          .querySelector(selector)
          .append(label);
      }
    }
  }

selectorIdつまり、idにuserIdを持つ、タグで囲われた要素の中の、.D20220222を持つ要素を探します。

これによりdocumentの中から以下の要素が取得できます。

<tr id="userId">
  <td class="D20220222">
  </td>
</tr>

ここに、appendでlabelを追加します。

以上より、最終的にappendLabelで行っていることは、上記の<td>要素に、<div>要素を追加して、以下のような形にしているということになります。

<tr id="NKM1213_WC">
  <td class="D20220214">
    <div class="setClassName">名前</div>
  </td>
</tr>

これでだいぶんJavaScriptが分かるようになりましたね！

以上、お読みいただきありがとうございました。

コメント