JavaScriptのDOM操作について詳しくまとめる【メモ】

実務では、jQueryを使うことが多いのですが、JavaScriptも理解しておかないとダメだなと思い、DOM操作を備忘録的にまとめてみます。

よく使うものをピックアップしてまとめていこうと思うので、少しでも参考になれば幸いです。

随時追加していこうと思っています。

要素を取得 querySelector() メソッド

mozillaには以下のように書いてありますが、簡単にいうと、任意のHTML要素を検出・取得することができるメソッドです。

Document の querySelector() メソッドは、指定されたセレクターまたはセレクター群に一致する、文書内の最初の Element を返します。一致するものが見つからない場合は null を返します。

引用元：https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

<div class="cls">HTML要素を取得</div>

<div id="id">HTML要素を取得</div>

const cls = document.querySelector('.cls'); //classの時は、「.」を忘れないように

const id = document.querySelector('#id'); //idの時は、「#」を忘れないように

要素のリストを取得 querySelector() メソッド

querySelectorAll()メソッドは、同一のCSSセレクターが付いた要素を全て配列で格納することができます。

↓厳密には、NodeListを返すので配列とは違うのですが、分かりやすいようにそう表現します。

メモ: NodeList は Array とは異なりますが、forEach() メソッドで処理を反復適用することは可能です。Array.from() を使うことで Array に変換することができます。

Document の querySelectorAll() メソッドは、指定された CSS セレクターに一致する文書中の要素のリストを示す静的な（生きていない）NodeList を返します。

引用元：https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

<ul class="list">
  <li class="list-item">リスト1</li>
  <li class="list-item">リスト2</li>
  <li class="list-item">リスト3</li>
</ul>

forEachを使用することで、.list-item 一つひとつにアクセスできます！

併用することが多いということを覚えておきましょう。

const listAllItem = document.querySelectorAll('.list-item');

listAllItem.forEach((el) => {
  console.log(el);
});

クラスリストを操作　classListプロパティ

classList自体は、読み取り専用のプロパティですが、 add(), remove(), replace(), toggle() の各メソッドを用いてオブジェクトを変更することはできます。

Element.classList は読み取り専用のプロパティで、生きた DOMTokenList コレクションでその要素の class 属性を返します。これを使用してクラスリストを操作することができます。

classList を使用することは、 element.className から取得した空白区切りの文字列として要素のクラスのリストにアクセスすることの便利な代替手段になります。

引用元：https://developer.mozilla.org/ja/docs/Web/API/Element/classList

const add = el.classList.add('add'); //addクラスを追加
const remove = el.classList.remove('list-item'); //list-itemクラスを追加
const replace = el.classList.replace('list-item', 'replace'); //list-itemクラスをreplaceに置換
const toggle = el.classList.toggle('toggle'); //togleクラスを追加、削除

要素の属性を取得または設定するメソッド getAttribute(), setAttribute()

要素の属性を取得するメソッドがgetAttribute()、要素の属性を設定するメソッドがsetAttribute()です。

<input type="text" placeholder="これはinputです。" class="input">

例えば、placeholder="これはinputです" をinputに入れたければ、以下のように書きます。

const input = document.querySelector('.input');
input.setAttribute('placeholder', 'これはinputです')