はじめに

この記事は以下の書籍を参考に作成しました。

クライアントサイドJavaScript(DOM)

クライアントサイドJavaScript(DOM)で開発をする場合、以下の３つを抑えなければなりません。

・要素ノードの取得(今回の内容)

・文書ツリー間の行き来

・イベントドリブンモデル

要素ノードを取得する

JavaScript(以下JS)からHTMLなどの「要素を値を取り出す」「処理した結果を要素に反映させる」「新規に要素を作成し、既存の要素の配下に追加する」といった処理をするためには、操作の対象となる要素を取りださなければなりません。
JSで要素を取得するには、いくつかの方法がありますが、特に使用頻度の高い方法を紹介します!

要素ノードの取得方法

1.id値から取得-getElementByIdメソッド-

もっともシンプルな取得方法で、指定されたidを持つ要素を取得します。

構文

document.getElementById(取得したいid名);

使用例

index.html

<p id="test"></p> <!--idを指定-->

main.js

let test = document.getElementById('test'); //id=testが含まれている要素を取得
test.textContent = 'これはテストです' //取得した要素にテキストを埋め込む

//ページに反映する　→　「これはテストです」

getElementByIdメソッド他にも、

・getElementsByTagNameメソッド (name属性から要素を取得)

・getElementsByNameメソッド (要素名から要素を取得)

・getElementsByClassNameメソッド (name属性から要素を取得)

など、getXxxxxメソッドで異なる方法で要素を取得することができます。
使い方は、メソッドによって少しことなるので、気になったら調べてみてください。

2.セレクター式に合致した要素を取得-querySelector / querySelectorAllメソッド-

getXxxxxメソッドに比べ、より複雑な条件で要素を取得することができるメソッドです。
セレクター式で文章を検索し、合致した要素を取得できます。

構文

document.querySelector(セレクター式);
document.querySelectorAll(セレクター式);

使用例

index.html

<ul id="testList">
  <li class="testItem"></li>
  <li></li>  <!--クラス指定していない-->
  <li class="testItem"></li>
</ul>

main.js

let testItems = document.querySelectorAll('#testList .testItem'); 
//「id="testListである要素」の配下から「class=testItemのあるアンカータグ」を取得

for(let i = 0; i < testItems.length; i++){
testItems[i].textContent = 'これはテストです';
//リストから順にアンカータグを取り出し、そテキストを挿入
}

//ページに反映
//→・これはテストです　
//・
// ・これはテストです

セレクター式を使うことで、複雑な要素の指定をしたいという状況でも、複雑なコードを書く必要がなくなります。
取得したい要素が１つとわかっている場合はquerySelecotorメソッドを使用してましょう。

getXxxxメソッドとqueryXxxxメソッドの使い分け

queySelector/querySelectorAllメソッドを用いれば、どんな要素でも取得することができます。
しかし、getXxxxメソッドに比べて動作が低速になってしまうというデメリットがあります。
なので、私は以下のように使い分けています。

・id,class名で取得できる場合→getXxxxメソッド
・複雑な条件で取得したい場合→queryXxxxメソッド

さいごに

以上にあげた方法以外にも、ノードウォーキングで取得する方法（childrenNodesプロパティ）など様々な方法で要素を取得することができます。
先頭でも記述したように、JSからHTMLを編集するためにかかせない作業になります。
まずは、ここに記述した方法を使ってみましょう！使い方に慣れてきたら違う取得方法にも挑戦しましょう！

【JavaScript】要素ノードの取得方法