WebサイトでJavaScriptを実装しようとすると、何をやろうにもまずは要素の取得をする必要があります！
例えば「ボタンをクリックするとテキストの色が変わるアニメーション」を実装しようと思ったら、まずはボタン要素の取得とテキスト要素の取得が必要です！
そして要素の取得方法は、要素によってさまざま。
タグやクラス、IDの取得から、 imgタグの画像やaタグのリンク、そしてinputのタイプやバリューなどいろんな要素の取得方法を紹介します。
これからWEBサイトをJavaScriptで蹂躙していくためにも、欠かせない知識です！
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
見出しが「サンプルコード」のコードは、空っぽのhtmlファイルにコピペするだけで結果を確認することができます！
それでは本文へ、レッツゴー！
基本的な要素の取得方法（要素が1つだけのとき）
ファイル内に1つしか存在しないタグやクラス、IDを取得する方法です。
// 単一要素の取得（タグ、クラス、ID）
document.querySelector('取得したい要素')取得する要素が単一なのか、複数存在するのかによって記述が異なります。
まずはページ内に取得する要素が1つしか存在しない場合の取得方法です。
document.querySelector('タグ名');
document.querySelector('.クラス名');
document.querySelector('#ID名');h1タグやpタグといった通常のタグの場合、”(クォーテーション)内に取得したいタグの名前を記述します。
クラス名やID名で取得したい場合、CSSの記述と同じように、名前の前に.（ドット）もしくは#（シャープ）が必要になります。
取得した要素が複数あった場合、正常に作動しないので注意が必要です。
サンプルコード
<p id="sample_id">このpタグのidは sample_id です。</p>
<script>
// 要素の取得
const sampleId = document.querySelector('#sample_id');
// 要素の確認
console.log(sampleId);
</script>constが分からない方はこちら
console.logが分からない方はこちら
基本的な要素の取得方法（要素が複数あるとき）
複数存在するタグやクラスを取得する方法です。
// 複数要素の取得（タグ、クラス）
document.querySelectorAll('取得したい複数ある要素')単一要素を取得する場合の.querySelectorの後ろにAllがくっつきます。
querySelectorAllで取得したものは配列ではない
基本的に配列と同じように扱うことができるのですが、時折思うように動いてくれないことがあります。
これは取得した要素が、通常の配列ではなくNodelistとして取得されることが原因の場合があります。
その場合、Nodelistから配列に変換してあげることで解決することができます。
Nodelistについての解説は、少しややこしいのと初心者にはまだ必要ないかなと判断したので割愛します。
// Nodelistを配列に変換
Array.from(ノードリスト)サンプルコード
<ul id="sample_tags">
<li>この3つのliタグを取得します</li>
<li>この3つのliタグを取得します</li>
<li>この3つのliタグを取得します</li>
</ul>
<script>
// 要素の取得
const sampleTags = document.querySelectorAll('#sample_tags > li');
// 確認
console.log(sampleTags);
// 要素を個々に扱う
sampleTags.forEach(e => {
// eを各要素として扱うことができる
console.log(e);
});
// Nodelistから配列に変換
const sampleTagsArray = Array.from(sampleTags);
// 確認
console.log(sampleTagsArray);
</script>子孫要素の取得方法
querySelectorで取得した要素を対象に、さらにquerySelectorで要素を取得することができます。
サンプルコード
<div class="sample_parent">
<p class="sample_child">この要素を取得します</p>
</div>
<p class="sample_child">同じクラス名ですがこの要素は取得されません</p>
<script>
// 親要素の取得
const sampleParent = document.querySelector('.sample_parent');
// 子要素の取得
const sampleChild = sampleParent.querySelector('.sample_child');
// 確認
console.log(sampleChild);
</script>要素の中身を取得する方法
取得した要素の中身だけが欲しいときは、一度要素を取得してからその中身だけを抜き出すという方法で取得できます。
その抜き出し方には2パターンあります。
// 要素の中身取得
要素.textContent
要素.innerHTMLtextContentは要素内のテキストのみを取得するのに対し、innerHTMLは要素内をまるごと取得します。
サンプルコード
<p class="get_inner">この<strong>中身</strong>を取得します</p>
<script>
// 要素の取得
const getInner = document.querySelector('.get_inner');
// textContentを確認
console.log(getInner.textContent);
// innerHTMLを確認
console.log(getInner.innerHTML);
</script>要素の属性（href、src、alt など）を取得する方法
imgタグの画像（src）や説明文（alt）、aタグのリンク（href）などを取得する方法です。
ついでに書き換える方法も紹介しちゃいます！
// 属性の取得
要素.getAttribute('属性')
// 属性の書き換え
要素.setAttribute('属性', '書き換えたい値')サンプルコード
<a href="https://efilamola.com/" id="sample_anchor">このaタグのリンク先を取得します</a>
<br>
<img src="https://efilamola.com/uploads/E30EE7F1-6BA1-454E-A3D0-BEC9D307E87D.jpg" alt="この画像のalt属性を取得し、書き換えます" id="sample_img" style="width: 150px;">
<script>
/* aタグのリンク先を取得 */
// aタグの取得
const sampleAnchor = document.querySelector('#sample_anchor');
// aタグのhref属性取得
const sampleAnchorHref = sampleAnchor.getAttribute('href');
// 確認
console.log(sampleAnchorHref);
/* imgタグの説明文書き換え */
// imgタグの取得
const sampleImg = document.querySelector('#sample_img');
// imgタグのalt属性確認
console.log(sampleImg.getAttribute('alt'));
// alt属性書き換え
sampleImg.setAttribute('alt', 'これで画像のalt属性が書き変わりました');
// 書き換えたalt属性確認
console.log(sampleImg.getAttribute('alt'));
</script>inputタグのいろんなもの取得する方法
タイプを指定したinput要素の取得方法
テキストやチェックボックス、ラジオボタンなど、タイプ別に取得する方法です。
// タイプを指定したinput要素の取得
document.querySelector('input[type="タイプ名"]')
document.querySelectorAll('input[type="タイプ名"]')この方法を使わなくても、取得したいinputタグにクラスやIDを付与し、通常のクラスやIDを取得する方法で取得してもOK！
name属性の取得方法
他の属性の取得方法と同様、getAttributeで取得することができます。
// name属性の取得
要素.getAttribute('name');value属性の取得方法
valueの取得はとってもシンプル！
// value属性の取得
要素.valueチェックボックスのチェックの有無を取得する方法
チェックボックスにチェックがはいっているかどうかを確認することができます。
// チェックボックスのチェックの有無取得
要素.checked返り値がboolean（真偽）で、チェック有りの場合はtrue、チェック無しの場合はfalseになります。
サンプルコード
<input type="text" value="ここの文字を取得します。"><br>
<input type="checkbox" checked>
<script>
/* input[type="text"]のvalue属性取得 */
// input[type="text"]の要素取得
const sampleInputText = document.querySelector('input[type="text"]');
// value属性取得
const sampleInputTextVal = sampleInputText.value;
// value属性確認
console.log(sampleInputTextVal);
/* input[type="checkbox"]のチェックの有無確認 */
// input[type="checkbox"]の要素取得
const sampleInputCheckbox = document.querySelector('input[type="checkbox"]');
// チェックの有無確認
const sampleInputCheckboxChecked = sampleInputCheckbox.checked;
// チェックの有無確認
console.log(sampleInputCheckboxChecked);
</script>擬似要素（beforeやafterなど）の取得はできない
残念ながら、JavaScriptで擬似要素を取得することはできません。
どうしても擬似要素を操作したい場合は、元の要素のクラスを操作することで、間接的に擬似要素を操作することはできます。
getElementとの違い
要素の取得には、getElementというものをつかって取得する方法もあります。
微妙な仕様の違いなどはありますが、まあ単純に古いやり方だと思っておいて問題ありません。
特にこだわりがなければquerySelectorを使っておきましょう。
まとめ
今回紹介したいろんな要素の取得方法をまとめたものです。
ぜひ活用してください♪
/*--------------------------------
基本的な要素の取得
---------------------------------*/
// 単一要素の取得（タグ、クラス、ID）
document.querySelector('取得したい要素')
// 単一要素の取得（タグ、クラス、ID）
document.querySelector('取得したい要素')
/*--------------------------------
要素のいろんな属性取得（href、src、alt など）
---------------------------------*/
// 属性の取得
要素.getAttribute('属性')
// 属性の書き換え
要素.setAttribute('属性', '書き換えたい値')
/*--------------------------------
inputタグのいろんなもの取得
---------------------------------*/
// タイプを指定したinput要素の取得
document.querySelector('input[type="タイプ名"]')
document.querySelectorAll('input[type="タイプ名"]')
// name属性の取得
要素.getAttribute('name');
// value属性の取得
要素.value
// チェックボックスのチェックの有無取得
要素.checked
