JavaScriptでの要素の取得方法のまとめ
ピュアな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の変更
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>’; |
よく使うわけではないのですが、たまに使いたくなったときに、思い出せずに困ります。
