◀︎    

getElementBy(" ") と querySelector(" ")

getElementBy(" ") と querySelector(" ") はどちらも JavaScript のメソッド(method)

▶︎

getElementBy〜

getElementsByTagName

document.getElementsByTagName()

指定されたタグをすべて取得します.

getElementsByClassName

document.getElementsByClassName("class名")

指定した Attribute → class を持つすべてのタグを取得します.

getElementsByName

document.getElementsByName("name名")

指定した Attribute → name を持つすべてのタグを取得します.

getElementById

document.getElementById("id名")

指定した Attribute → id を1つだけ取得します.

querySelector〜

指定した CSS セレクターと一致する最初のタグを取得します. CSS セレクターを使用できるため, 柔軟な選択が可能です.

document.querySelector(" ")

指定した CSS セレクターと一致するすべてのタグを取得します.

document.querySelectorAll(" ")

例 :

  1. 特定のタグ名を選ぶセレクター：querySelectorAll("div")
  2. クラス名を選ぶセレクター：querySelector(".classname")
  3. ID 名をひとつ選ぶセレクター：querySelector("#idの名前")
  4. Attribute セレクター：querySelectorAll('input[type="text"]')
  5. 子孫セレクタ：querySelectorAll("div p")
  6. 隣接セレクタ：querySelector("h1 + p")
  7. 擬似クラスセレクタ：querySelectorAll("li:first-child")
  8. グループ・セレクター：querySelectorAll("div,p,span")