WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

要素の取得方法一覧

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

取得できる要素取得方法
iddocument.getElementById(‘id’);
classdocument.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の変更

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>’;

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