本記事ではHTMLの要素をJavaScriptで取得する基本文法についてまとめます。
id、classなど属性ごとの指定方法をサンプルと併せて解説します。
- セレクタ関数の種類
- 各セレクタ関数の使い方、動作例
セレクタの種類について
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で取得する基本文法について記載しました。
応用した使い方の記事もありますので参考にしてください。
