もりけん塾 JavaScript課題1 DOMをHTMLに挿入する

もりけん塾 JavaScript課題1 DOMをHTMLに挿入する

もりけん塾に入ると、最初に「マークアップエンジニアの方がフロントエンドエンジニアになる為の課題」をやります。JS課題と呼んでます。今回は、初めてのJS課題1にチャレンジしたので、まとめたいと思います。

お題

課題1は、簡単なDOMをJavaScriptで作り、HTMLの中に表示させる課題です。

お題:このDOMをhtml内のulの中に差し込んでください。

<li>これです</li>

私の回答

最初の回答

document.getElementsByTagNameを使って、ulを取得することにしました。document.getElementsByTagNameは、複数のタグ要素を取得し、配列で返ってきます。そのため、取得した後に要素のインデックスの指定が必要です。ここでは、ひとつしかないので[0]を指定しました。

最初、理解が足りておらず、[0]をつけるのを忘れていたので、なぜ動かないのかかなり悩みました。

const targetElements = document.getElementsByTagName('ul');
targetElements[0].insertAdjacentHTML('afterbegin','<li>これです</li>');

最終的な私の回答

上記のコードでプルリクエストして、レビューを貰ったところ、ulの位置が変わったり増えた時のために、ulにidをつける方法がいいとアドバイスを貰ったので、下記に修正しました。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>TerraceTechフロントエンドエンジニア養成所</title>
  </head>
  <body>
    <div>
      <ul id="list"></ul>
    </div>
  </body>
  <script src="script.js"></script>
</html>
const targetElement = document.getElementById('list');
targetElement.insertAdjacentHTML('afterbegin','<li>これです</li>');

今回の課題で学んだこと

  • 要素の取得はidが優先される
  • 要素の取得方法は色々な方法がある。

要素の取得方法

色々な要素の取得方法があることを学ぶことができました。目的に合わせて、使い分ける必要があるので、適切な取得方法を選択できるように頭に入れておこうと思います。

今回、知った要素の取得方法です。要素の取得方法は、他にもありますが、よく使いそうなものを下記に、まとめました。

document.getElementById()ID名から要素を取得できる
document.getElementsByClassName()クラス名を指定して要素を取得できる
document.getElementsByTagName()HTMLタグを指定して要素を取得できる
要素を取得すると配列(オブジェクト)で返ってくるので、操作したい要素のインデックスを指定する必要がある
document.querySelector()ID名とclass名どちらを入れても要素を取得できる

今後の課題

どんな取得方法を使った方が効率がいいのか、考えながら、コードを書きたいです。

私が所属しているフロントエンドエンジニアを目指す方のための塾 「もりけん塾」の森田賢二先生のTwitterはこちら!

先生のブログ「武骨日記」はこちら!

https://kenjimorita.jp/

まい

Webサービス制作会社で、Wordpressのテーマ開発や2Dシミュレーターの開発、JavaScriptを使用したフロントエンド周りの実装を担当しています。 JavaScriptが好きです。 最近は、3D Model Configuratorの制作にチャレンジしています。

もりけん塾カテゴリの最新記事