JavaScriptを習得したい

on Note

querySelector()を使って文書の要素を取得する

JavaScriptからDOMを操作するにはまず、操作対象を選択することから始まります。操作の対象となるのが要素(Element)です。

この時、どの要素を操作するか、操作対象となる要素を選択する際に使用するメソッドの1つがquerySelector( )querySelectorAll( )です。

querySelector( )メソッドでは、操作したい要素のCSSセレクタを引数に指定します。

CSSでスタイルを適用する際、タグ名あるいはid名やclass名で対象を指定します。こういったセレクタをquerySelector( )メソッドでは、対象として引数に指定します。

querySelector( )とquerySelectorAll( )の違い

HTML文書では通常、タグ名やclass名は、同じものがいくつも存在します。(id名は1つの文書に原則1つですが。)querySelectorAll( )では、指定した引数に一致する要素を全て取得します。

要素を取得する際、配列の状態で格納します。配列ということで、[ ](角括弧)を用いてインデックス番号を同時に書くことで、その内の何番目かを指定することもできます。

document.querySelectorAll("p")
文書内のp要素全てを取得します。

document.querySelectorAll("p")[1]
文書内のp要素の内、2番目に登場したp要素を取得します。

一方「all」がついていないquerySelector( )では、要素を1つだけ取得します。一致する要素が複数ある場合は、最初の1つだけを取得します。

document.querySelector("p")
いくつもあるp要素の内、最初の1つを取得します。

引数の書き方

querySelector( )メソッドでは、引数にタグ名、id名、class名を指定します。この時、引数を「"」(ダブルクォテーション)か「'」(シングルクォテーション)で囲みます。

タグ名としてp要素を取得する場合、
document.querySelector("p")

id名を「abc」としている要素を取得する場合、
document.querySelector("#abc")

class名を「def」としている要素を取得する場合、
document.querySelector(".def")

引数の書き方は、CSSファイルでのセレクタの書き方と同じです。id名では「#」を付けますし、class名では「.」を付けます。

:nth-child( )で1つの子要素を指定する

:nth-child( )を使って「ある要素に対して何番目かの子要素」と指定すれば、取得する要素を1つに絞ることができます。

<ul class="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>
    
<script>
    document.querySelector(".list .item:nth-child(2)");
</script>

ul要素の子要素であるli要素の内、2番目の要素を取得します。