JavaScript

【JavaScript】セレクタでHTML要素を取得する（getElementBy、querySelector）

  /

本記事ではHTMLの要素をJavaScriptで取得する基本文法についてまとめます。
id、classなど属性ごとの指定方法をサンプルと併せて解説します。

この記事で分かること
  • セレクタ関数の種類
  • 各セレクタ関数の使い方、動作例
Contents
  1. セレクタの種類について
  2. セレクタによる取得方法
  3. まとめ

セレクタの種類について

HTMLドキュメントからHTML要素を取得する関数としてgetElementとquerySelectorがあります。

getElement系は昔からある関数で、何の属性を指定して取得するかで関数が異なります。querySelector系は指定する属性によらず同じ関数で取得できるように後から追加された関数です。

  • getElement系の関数

    関数 動作 取得対象
    getElementById id属性で取得する 合致する先頭の一つのみ
    getElementsByClassName class属性で取得する 合致する要素すべて
    getElementsByName name属性で取得する 合致する要素すべて
    getElementsByTagName HTMLタグで取得する 合致する要素すべて
    getElementsByTagNameNS 名前空間とHTMLタグで取得する 合致する要素すべて

    ※合致するものが複数あった場合、getElementは単体、getElementsは複数取得します。

  • querySelector系の関数

    関数 動作 取得対象
    querySelector id/class/name/タグで取得する。条件付けも可能 合致する先頭の一つのみ
    querySelectorAll id/class/name/タグで取得する。条件付けも可能 合致する要素すべて

qurySelectorの方が記載が簡単で拡張性も高い関数です。querySelectorを使うとよいでしょう。

セレクタによる取得方法

サンプルHTMLについて

以下のHTML文書から取得するものとします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="ul1">
        <li id="ul1_li1" class="li_class item1" name="name1">a</li>
        <li id="ul1_li2" class="li_class item2" name="name2">b</li>
    </ul>
    <ul class="ul2">
        <li id="ul2_li1" class="li_class item1" name="name1">f</li>
        <li id="ul2_li2" class="li_class item2" name="name2">g</li>
    </ul>
    <script src="SelectorTest.js"></script>
</body>
</html>
ブラウザ上の表示

id指定

idを指定してHTML要素を取得します。

idは同じHTML文書内で重複しない一意の情報です。

コード例

console.log('--- document.getElementById("ul1_li2") ---');
console.log(document.getElementById("ul1_li2"));

console.log('--- document.querySelector("#ul1_li2") ---');
console.log(document.querySelector("#ul1_li2"));
[結果]
--- document.getElementById("ul1_li2") ---
<li id=​"ul1_li2" class=​"li_class item2" name=​"name2">​…​</li>​
--- document.querySelector("#ul1_li2") ---
<li id=​"ul1_li2" class=​"li_class item2" name=​"name2">​…​</li>​

 

getElementById

関数の引数としてid名をそのまま指定します。idに合致するHTML要素が一つだけ取得されます。

document.getElementById("id名");

querySelector

関数の引数としてid名を指定します。id名の前に#を付けます。（関数にid名であることを伝えるために#が必要です。）
idに合致するHTML要素が一つだけ取得されます。

document.querySelector("#id名")

 

class指定

classを指定してHTML要素を取得します。

コード例

console.log('--- document.getElementsByClassName("li_class") ---');
console.log(document.getElementsByClassName("li_class"));

console.log('--- document.querySelector(".li_class") ---');
console.log(document.querySelector(".li_class"));

console.log('--- document.querySelectorAll(".li_class") ---');
console.log(document.querySelectorAll(".li_class"));
[結果]
--- document.getElementsByClassName("li_class") ---
HTMLCollection(4) [li#ul1_li1.li_class.item1, li#ul1_li2.li_class.item2, li#ul2_li1.li_class.item1, li#ul2_li2.li_class.item2]

--- document.querySelector(".li_class") ---
<li id=​"ul1_li1" class=​"li_class item1" name=​"name1">​…​</li>​

--- document.querySelectorAll(".li_class") ---
NodeList(4) [li#ul1_li1.li_class.item1, li#ul1_li2.li_class.item2, li#ul2_li1.li_class.item1, li#ul2_li2.li_class.item2]

getElementByClassName

関数の引数としてクラス名をそのまま指定します。クラス名に合致するHTML要素が全て取得されます。(HTMLCollectionに格納されて返されます）

document.getElementByClassName("クラス名");

 

querySelector/querySelectorAll

関数の引数としてクラス名を指定します。クラス名の前に.を付けます。（関数にクラス名であることを伝えるために.が必要です。）
querySelectorの場合、クラス名に合致するHTML要素が一つだけ取得されます。
querySelectorAllの場合、クラス名に合致するHTML要素が全て取得されます。(NodeListに格納されて返されます）

document.querySelector(".クラス名")
document.querySelectorAll(".クラス名")

 

name指定

コード例

console.log('--- document.getElementByName("name2") ---');
console.log(document.getElementsByName("name2"));

console.log('--- document.querySelector("[name = \'name2\'") ---');
console.log(document.querySelector("[name = 'name2'"));

console.log('--- document.querySelectorAll("[name = \'name2\']") ---');
console.log(document.querySelectorAll("[name = 'name2'"));
[結果]
--- document.getElementByName("name2") ---
NodeList(2) [li#ul1_li2.li_class.item2, li#ul2_li2.li_class.item2]

--- document.querySelector("[name = 'name2'") ---
<li id=​"ul1_li2" class=​"li_class item2" name=​"name2">​…​</li>​

--- document.querySelectorAll("[name = 'name2']") ---
NodeList(2) [li#ul1_li2.li_class.item2, li#ul2_li2.li_class.item2]

getElementByName

関数の引数としてname属性の値をそのまま指定します。nameに合致するHTML要素が全て取得されます。(NodeListに格納されて返されます）

document.getElementByName("名前");

 

querySelector/querySelectorAll

関数の引数としてname属性の値を[name=’名前’] の形式で指定します。
querySelectorの場合、クラス名に合致するHTML要素が一つだけ取得されます。
querySelectorAllの場合、クラス名に合致するHTML要素が全て取得されます。(NodeListに格納されて返されます）

document.querySelector("[name='名前']")
document.querySelectorAll("[name='名前']")

 

HTMLタグ指定

コード例

console.log('--- document.getElementByTagName("li") ---');
console.log(document.getElementsByTagName("li"));

console.log('--- document.querySelector("li") ---');
console.log(document.querySelector("li"));

console.log('--- document.querySelectorAll("li") ---');
console.log(document.querySelectorAll("li"));
[結果]
--- document.getElementByTagName("li") ---
HTMLCollection(4) [li#ul1_li1.li_class.item1, li#ul1_li2.li_class.item2, li#ul2_li1.li_class.item1, li#ul2_li2.li_class.item2]

--- document.querySelector("li") ---
<li id=​"ul1_li1" class=​"li_class item1" name=​"name1">​…​</li>​

--- document.querySelectorAll("li") ---
NodeList(4) [li#ul1_li1.li_class.item1, li#ul1_li2.li_class.item2, li#ul2_li1.li_class.item1, li#ul2_li2.li_class.item2]

getElementByTagName

関数の引数としてHTMLのタグ名をそのまま指定します。合致するHTML要素が全て取得されます。(HTMLCollectionに格納されて返されます）

document.getElementsByTagName("HTMLタグ");

なお、getElementByTagNameNSを使うとさらに名前空間で絞り込んで取得することができます。

querySelector/querySelectorAll

関数の引数としてHTMLのタグ名をそのまま指定します。
querySelectorの場合、合致するHTML要素が一つだけ取得されます。
querySelectorAllの場合、合致するHTML要素が全て取得されます。(NodeListに格納されて返されます）

document.querySelector("HTMLタグ")
document.querySelectorAll("HTMLタグ")

 

まとめ

本記事ではHTML要素をJavaScriptで取得する基本文法について記載しました。

応用した使い方の記事もありますので参考にしてください。

Yone IT Note
2022.07.04
【JavaScript】入れ子になっているHTML要素を取得する（querySelector）
querySelectorを使うことで、HTML要素の入れ子(ネスト）を考慮した要素の取得を簡単に記述できます。 入れ子になっているHTML要素の取得方法(querySelector)querySelectorによる入れ子要素の取得サンプルHTMLについて以下のHTML文書から取得するものとします。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device…

JavaScript
RELATED POST

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA