Javascript自學筆記 (3)

參考:CSS選擇器

querySelector()

  1. querySelector()會傳回document文檔中與指定選擇器(或選擇器組)符合的第㇐個Element。
  2. 如果找不到符合的元素,則傳回null值。
  3. 使用方法與CSS選擇器相同

語法:element = document.querySelector(selectors);

  • selectors 包含㇐個或多個 CSS 選擇器的字串
  • 例如:
    • .class 使用.來指向元素的class屬性
    • id 使用#來指向元素的id屬性

querySelectorAll()

語法:elementList = elements.querySelectorAll(selectors);

  • elementList 返回值是元素列表
  • elements 元素集合,可以是document或其他元素集合
  • selectors CSS選擇器內容
    • 如果語法不符合CSS選擇器,則會顯示語法錯誤(SyntaxError)
    • 使用逗號 , 可以分格多個選擇器來指定
    • 例如:document.querySelectorAll("h1, h2"),可以選擇文件中標籤為h1或是h2的所有元素

使用querySelectorAll()取得document文件中,所有的p元素:
var x = document.querySelectorAll("p");:返回值為Nodelist型式的元素列表

  • length屬性:列表的⾧度,可以理解成元素列表中的元素數量
  • 取出元素列表中的值:例如:x[0] 可以取出元素列表中第㇐個元素值

控制元素內的屬性值:x[0].style.color = 'green'

在這邊所介紹的語法:querySelectorquerySelectorAll可能會跟 Javascript自學筆記 (1) 所介紹的 getElementByID、getElementsBy相關方法 (getElementsByClassName, getElementsByTagName, getElementsByName)搞混,需弄清楚!!!

相關請善用:

  1. querySelector
  2. querySelectorAll
  3. getElementByID
  4. getElementsByClassName
  5. getElementsByTagName