Javascript自學筆記 (3)

Web開發 Javascript
1

參考：https://forum.stdb.org/t/topic/30923

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'

在這邊所介紹的語法：querySelector與querySelectorAll可能會跟 https://forum.stdb.org/t/topic/30919 所介紹的 getElementByID、getElementsBy相關方法 (getElementsByClassName, getElementsByTagName, getElementsByName)搞混，需弄清楚!!!

相關請善用：

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