JavaScript: HTML 要素を取り出す

div や table などの HTML の要素を取り出す方法の話です。

querySelector() と querySelectorAll()

querySelector() と querySelectorAll() は昔のブラウザにはなかった関数です。 現在では HTML 要素の取り出しはこれらの関数で間に合います。

querySelector()

• MDN:Document.querySelector()
  引数で指定した条件に一致する HTML 要素を 1個返します。最初に一致した要素を返します。
• MDN:Element.querySelector()
  上と同じです。

Document と Element にそれぞれ querySelector() がありますが、 動作は同じなので気にしなくて良いです。 クラスが異なるので個別に用意されています。

• HTML 要素 (タグ) の処理: Node, Element, HTMLElement
  HTML 要素のクラス構成に関する話です。 はじめの一歩では細かい話は気にしなくて良いです。

querySelectorAll()

• MDN:Document.querySelectorAll()
  引数で指定した条件に一致する HTML 要素すべてを NodeList で返します。
• MDN:Element.querySelectorAll()
  上と同じです。

• MDN: NodeList
  NodeList は配列 Array とは異なるので注意してください。 配列として処理したい場合は Array.from(nodelist) などで Array オブジェクトにして処理します。

document.querySelector() を使う

引数で指定した条件に一致する最初の要素を返します。 取り出したい要素が 1個しかないと分かってる場合は querySelector() を使います。

条件を満たす要素が複数ある場合は 最初に見つかった要素しか返さないので注意が必要です。 複数ある場合は querySelectorAll() で処理します。

指定した ID 名の要素を取り出す

ID 名が指定された要素は HTML 内で 1個しかないので querySelector() で取り出せます。 querySelector() の引数に #ID名 を書きます。

const element = document.querySelector("#ID名");

• TestJS_div_textContent01.html
  指定した id 名の div 要素を取り出す。

CSS セレクタで細かく指定する

querySelector() の引数に CSS セレクタを細かく指定して要素を取り出せます。

• TestJS_querySelector_ul_li01.html
  ul, li のサンプル。
• TestJS_querySelector_table01.html
  table の指定の行・列の td を querySelector() で取り出す。
  tableタグ: JavaScript (1)

input タグのラジオボタンで選択された項目の値を読む

ラジオボタンは input タグの type="radio" の要素で、 複数の項目の中からどれか 1つを選択できるボタンです。
input タグ: type="radio" ラジオボタン

ラジオボタンで現在選択されている項目の値も querySelector() で簡単に取り出すことができます。 ラジオボタンの場合は input 要素に name="グループ名" が設定されているのでグループ名を指定します。 :checked を付けると現在選択されている input 要素が取り出せます。

//例: ラジオボタンのグループ名が group1 の場合。
const value = document.querySelector("input[name='group1']:checked").value;

// 上の処理を分解すると？
// 1) 現在選択されている input 要素を取り出す。
const input = document.querySelector("input[name='group1']:checked");
// 2) input 要素の値を取り出す。
const value = input.value;

• MDN: 属性セレクター

select タグで選択された項目の値を読み取る

• 例1: id名で指定する例。

  // <select id="SELECT1"> の場合。
  const value = document.querySelector("#SELECT1 option:checked").value;
  

• 例2: グループ名で指定する例。

  // <select name="select1"> の場合。
  const value = document.querySelector("select[name='select1'] option:checked").value;
  

  
  

サンプル

querySelector() の戻り値は HTMLElement です

少しややこしい話になります。 ちょっとした Web プログラミングでは気にする必要はありません。 内部のクラス構成の細かい話です。

• HTML 要素 (タグ) の処理: HTMLElement, Element, Node

XML でも querySelector() が使用できます

• TestJS_XML_querySelector01.html (2022)
  XML からクエリーで指定した要素の textContent を取り出す。
  JavaScript: XML の処理

document.querySelectorAll() を使う (2023/12)

querySelectorAll() の戻り値の処理

querySelectorAll() の戻り値は NodeList です。 NodeList の要素は for of で簡単に処理できます。

• TestJS_querySelectorAll_li01.html (2022)
  document.querySelectorAll() のサンプル。ul,li リストの li を取得する。
  

  // ul 内の li のリストを取得する。
  const list = ul.querySelectorAll("li");
  // for of で処理する例
  for (const li of list){
  	println( li.textContent );
  }
  

  ul,ol,liタグ, JavaScriptサンプル
  (補足) for of は IE11 では使えませんでした。

• TestJS_event_table_ES2015.html
  table の td にクリックイベントをつけるサンプル。
  

  // table の td にイベント処理をつける例
  const list = table.querySelectorAll("td");
  for (const td of list){
  	td.onclick = event => onclickTd(td, event);  //アロー関数でイベント処理を付ける。
  }
  

  JavaScript イベント処理 (1)
  (補足) アロー関数は IE11 では使えませんでした。

NodeList は配列 Array とは異なるので Array.indexOf() などを使いたい場合は NodeList を Array に変換することが必要です。 Array.from(NodeList) や NodeList.values() を使います。

• TestJS_ul_li_index01.html
  ul,li リストの li のインデックス値を得る。
  

  //ui, li リストの li のインデックス値を得る。
  const list = ul.querySelectorAll("li");
  const array = Array.from(list);
  const index = array.indexOf(li);
  

  ul,ol,liタグ, JavaScriptサンプル
  

• TestJS_querySelectorAll_table01.html
  table の th のテキストを配列で取り出す。
  

  //Array.map(アロー関数) の例。
  //table の th の textContent の配列を取り出す。
  const list = table.querySelectorAll("thead th");
  const thArray = Array.from(list).map( th => th.textContent);
  

:scope> 要素名 で直下の要素を取得する

例えば ul, li がネストしているツリーの HTML で ul 直下の子の li だけ取得し、li より下の孫の li は取得したくない場合があります。 このようなときに :scope> 要素名 を指定します。
(補足) :scope> は IE11 では使えませんでした。

• TestJS_querySelectorAll_li02.html
  querySelectorAll(":scope>要素名"); のサンプル。
  ネストする ul-li-ul-li の直下の li だけ取得する。

getElementById(), getElementsByTagName() など

getElementById(), getElementsByTagName() などの関数は querySelector() や querySelectorAll() がない時代からあった昔の関数です。 現在では処理時間が気になるような巨大な HTML ツリー以外では使う必要ありません。
JavaScript 考古学

getElementById(id名)            id 名の要素を取得する
getElementsByTagName(tag名)     tag 名の要素をリストで取得する *1)
getElementsByClassName(class名) class 名の要素をリストで取得する *1)
など

*1) 戻り値は配列(Array)ではないので注意。HTMLCollection が返ります。
  for (let key in array) でアクセスしないこと。

jQuery 風の $() 関数

document.querySelector(); では記述が長くなるので、 何度も書いていると面倒になります。 jQuery風の $() 関数に置き換えることもできます。 要素を取り出すだけであれば、これで間に合います。

• TestJS_querySelector_jquery01.html
  $() 関数のサンプル。

関連

• JavaScript: はじめの一歩 (2)
• JavaScript: HTML 要素 (タグ) の処理
• JavaScript: HTML 要素にテキストを出力する
• HTML: ユーザー定義の要素を使う
• JavaScript: XML の処理