JavaScriptでの要素の取得方法のまとめ

2019年8月3日

ピュアなJavaScriptで要素を取得したいとき、getElementByIdなら覚えているのですが、他のものになると忘れてしまうときがあるので、メモも兼ねて基本操作と一緒にまとめておきます。

要素の取得方法一覧

まずは要素の取得方法から、querySelectorとquerySelectorAllがjQueryを使っていた人には馴染み深いと思いますので、基本的にはそれを使っていていいように思います。

取得できる要素	取得方法
id	document.getElementById(‘id’);
class	document.getElementsByClassName(‘class’);
HTMLタグ	document.getElementsByTagName(‘h1’);
CSSセレクタ（最初の1つ）	document.querySelector(‘#id .class h1’);
CSSセレクタ（全て取得）	document.querySelectorAll(‘#id .class’);

一般的に、使う時は変数内に入れて使用します。

let myElement = document.getElementById('#sample')

既に要素を取得していて、その要素の親子兄弟要素を取得したい場合は下記のように書きます（myElementの部分には要素を取得した変数が入ります）。

取得できる要素	取得方法
すべての子要素を取得	myElement.children;
最初の子要素を取得	myElement.firstElementChild;
最後の子要素を取得	myElement.lastElementChild;
親要素を取得	myElement.parentElement;
次の兄弟要素を取得	myElement.nextElementSibling;

classを変更したい時はclassListを使用します（myElementの部分には要素を取得した変数が入ります）。

できること	方法
classの追加	myElement.classList.add(‘active’);
classの削除	myElement.classList.remove(‘active’);
classのトグル	myElement.classList.toggle(‘active’);

jQueryに慣れているといきなりaddやremoveを付けそうになるので注意が必要です。

既にある要素のテキストを変更したい場合や、HTMLを変更したい場合は下記のように書きます（myElementの部分には要素を取得した変数が入ります）。

できること	方法
テキストの変更	myElement.textContent = ‘変更したいテキスト’;
HTMLの変更	myElement.innerHTML = ‘<span class=”text”>変更したいテキスト</span>’;

よく使うわけではないのですが、たまに使いたくなったときに、思い出せずに困ります。