もりけん塾に入ると、最初に「マークアップエンジニアの方がフロントエンドエンジニアになる為の課題」をやります。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はこちら!
【募集】フロントエンド、とりわけJavaScriptを教えてもらいたい塾生を募集しています。条件はありますが、お金は頂きません。詳しくはDMください#JavaScript教えてもらいたい方#駆け出しのエンジニアと繋がりたい
— フロントエンドエンジニア (@terrace_tech) April 18, 2020
わたしについて👉https://t.co/FETVmMT5AY
先生のブログ「武骨日記」はこちら!