JavaScript 初心者筆記 | querySelector
什麼是DOM?在前面的文章有簡單介紹過,傳送門:JavaScript初心者筆記:JS內建物件-全域物件篇[1]。DOM是DocumentObjectModel的縮寫,中文叫做文件物件模型。HTML世界中的元素,對應到JS世界就叫做DOM。瀏覽器在解析我們的網頁結構的時候,首先會先解析出一個文件(document),然後像樹狀圖一樣一層一層向下解析HTML標籤,每個標籤都是一個DOM節點。如何選取HTML元素選擇單一元素-querySelector以添加文字為例,在之前我們學會的寫法是這樣:document.getElementById(titleId).textContent=1234;現在我們可以用.querySelector(#id名/.cl...
什麼是 DOM?在前面的文章有簡單介紹過,傳送門:JavaScript 初心者筆記: JS 內建物件 - 全域物件篇[1]。DOM 是 Document Object Model 的縮寫,中文叫做文件物件模型。HTML 世界中的元素,對應到 JS 世界就叫做 DOM。瀏覽器在解析我們的網頁結構的時候,首先會先解析出一個文件 ( document ),然後像樹狀圖一樣一層一層向下解析 HTML 標籤,每個標籤都是一個 DOM 節點。
如何選取 HTML 元素 選擇單一元素 - querySelector以添加文字為例,在之前我們學會的寫法是這樣:document.getElementById(titleId).textContent = 1234;現在我們可以用 .querySelector(#id 名 / .class 名) 來選取元素,而且為了程式應用上的靈活度,可以拆成兩部分:
var el = document.querySelector(#titleId); el.textContent = 1234;.querySelector() 還可以選到 id / class 的子元素喔!
var el = document.querySelector(#titleId em); el.textContent = 1234; querySeletor 這麼好用,那為何還需要 getElementById?因為網頁上 id 不能重複,只會有唯一一個,所以才有 getElementById 來讀取這個獨一無二的東西,但它也只能用來讀取 id 而已。
可重複選取多個元素 - querySelectorAll剛剛講的 querySelector 遇到重複的 class 存在時,它只能選取第一筆資料;而如果我們有許多相同的 class 都要選取,就該用 querySelectorAll,所選取的所有元素將會以陣列的形式回傳,因此如果後續要對元素做任何修改,就應該透過陣列的規則,配合 for 迴圈去跑。
已知選取元素的數量 var el = document.querySel...