JavaScriptからHTMLの要素を取得する、基礎的な方法を紹介します！
idを指定して要素を取得
書式
var 要素オブジェクト = document.getElementById(取得する要素のid名);
id属性を持つHTML内の要素を取得できます。
利用する場合は、要素にidが振られていることが必須です。
利用する場合は、要素にidが振られていることが必須です。
例
HTMLの例
<p id=”text”>要素を取得できます。</p>
上記の場合のJavaScriptの例
var elem = document.getElementById(“text”);
HTMLでpタグに「id=”text”」が振られているため、JavaScriptで、取得する要素のid名に「text」を記述してあげればOKです！
要素オブジェクトとは？
変数を宣言するときと同様、任意の文字列を指定できます。
（例えば、上記で「var elem」と記述していますが、「elem」でなくても大丈夫です。）
ただし、プログラム内であらかじめ決められた単語（予約語といいます）や数字から始まる文字列は指定できないので注意しましょう！
※予約語の例：var / function / if / for / whileなど
タグ名を指定して要素を取得
書式
var 要素オブジェクト = document.getElementsByTagName(取得する要素のタグ名);
HTMLのタグ名の要素をすべて取得します。
id名と違って「getElements」と複数形になっている点に注意しましょう！
id名と違って「getElements」と複数形になっている点に注意しましょう！
例
HTMLの例
<ul>
<li>1要素を取得できます。</li>
<li>2要素を取得できます。</li>
</ul>
<li>1要素を取得できます。</li>
<li>2要素を取得できます。</li>
</ul>
上記の場合のJavaScriptの例
var elems = document.getElementsByTagName(“li”);
この場合、liタグの要素すべてを取得します。
CSSのクラス名を指定して要素を取得
書式
var 要素オブジェクト = document.getElementsByClassName(CSSのクラス名);
id名と違って「getElements」と複数形になっている点に注意しましょう！
例
HTMLの例
<ul>
<li class=”item”>1要素を取得できます。</li>
<li class=”item”>2要素を取得できます。</li>
</ul>
<li class=”item”>1要素を取得できます。</li>
<li class=”item”>2要素を取得できます。</li>
</ul>
上記の場合のJavaScriptの例
var elems = document.getElementsByClassName(“item”);
この場合、クラス名が「item」の要素すべてを取得します。
おすすめ書籍
参考にしたおすすめ本はこちら！↓
参考書籍：たった1日で基本が身に付く！JavaScript超入門｜著者：片渕彼富
こちらの書籍では、JavaScriptの基礎をわかりやすく解説してくれている本です。
初心者向けに、知識を詰め込みすぎず、徹底的に文法などを解説してくれているため、とっつきやすいと思います。
JavaScript初心者さんや、挫折してしまった人に特におすすめです！
