iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
自我挑戰組

這些日子我學到的JavaScript 系列 第 18

這些日子我學到的JavaScript-Day17-DOM:如何用 JS 選取 HTML 元素

  • 分享至 

  • xImage
  •  

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.querySelectorAll('.titleClass');
el[0].textContent = '123';
el[1].textContent = '123';
不知道選取元素的數量
var el = document.querySelectorAll('.titleClass');
var elLen = el.length;
for( i=0 ; i < elLen ; i++){
el[i].textContent = i + '123';
}


上一篇
這些日子我學到的JavaScript:Day16-JSON
下一篇
這些日子我學到的JavaScript:Day18-DOM - 如何用 JS 新增 HTML 內容
系列文
這些日子我學到的JavaScript 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言