#概要
DOM操作では必ず要素を取得します。
要素の取得についての記事です。
#要素の選択
DOMの操作は、HTMLタグの要素を取得することから始めます。
ElementとはNodeを継承したオブジェクトです。
継承とは、親クラスの特徴を継承して新しいクラスを継承することです。元になったクラスを親クラス、新しいクラスを子クラスと言います。
JSからの要素の選択は、querySelectorとquerySelectorAllが使われます。この２つのメソッドはCSSセレクターを引数として要素を選択します。
index.html
<div class=header>
<h1 class="title">ToDoリスト</h1>
</div>
1,querySelector();
main.js
const title = document.querySelector('.header');
console.log(title);
上記のように取得することにより、コンソールに取得した要素が表示されます。
指定した要素が存在しない場合はNullを返します。
*CSSセレクターとは
CSSで要素を指定する方法です。クラス名は「.class名」、id名は「#id名」とします。
2,document.querySelectorAll();
index.html
<ul id="task">
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
ul要素の中のli要素を取得する場合、すべての要素の選択は以下のように取得します。
main.js
const li = document.querySelectorAll('li');
console.log(li);
すべての要素を取得することができました。
li要素の１つのみを取得する場合は以下のように添え字を記述することで指定することができます。
main.js
console.log(li[2]);
//さしすせそ
すべてのli要素に処理を実施する場合は、forEachを使用します。
main.js
li.forEach((list,index) =>{
console.log(`${index}番目の${list}です`);
});
3,document.getElementById
main.js
const task = document.getElementById('task');
console.log(task);
HTMLのid名の取得は上記のように記述します。