Javascript初學筆記14 DOM基本操作-節點內容修改實作練習

上一篇文章我們介紹了基本的DOM操作語法,這次我們使用以下的codepen做個簡單的實作練習~!
https://codepen.io/yvkfgzhs/pen/oOQEoe
內含我用bootstrap弄的一個表格,CSS部分也內嵌了font-awesome~!

仔細看一下你會發現這表格亂七八糟的,score的欄位不但tilte沒有大寫,內容也根本不是分數,所以今天我們要透過DOM操作完成以下幾點目標。

  1. 在名字旁邊加個讚icon,沒為什麼 我就是想要這樣
  2. 將score的部份字首大寫
  3. 修改score的內容
  4. 在score的欄位中加上+ – 的icons,方便我們之後做後續的操作練習

第一部分,利用document.querySelectorAll 選取名字的欄位,接著配合for迴圈在html的部份創造新的元素節點i

//名字旁邊加個讚
let names = document.querySelectorAll('tr>td:first-of-type')
for (let i = 0; i<names.length; i++){
let icons = document.createElement('i')
names[i].append(icons)
names[i].children[0].className = 'fa fa-thumbs-up'
}

裡面有幾個點需要特別注意一下,利用querySelectorAll選取時回傳的是一個Nodelist
如果沒加入:first-of-type的話會選取9個,但我們只要每組的第一個元素 也就是名字即可。接著我們雖然利用createElement創立了元素i,但你會發現HTML結構沒有任何改變,那是因為後續還需要append將其加入結構中,最後再變更i的className讓font-awesome可以套用~!同樣可以藉由classList.add(‘fa’,’fa-thumbs-up’)來達成

第二部分,簡單得多,想辦法選取到socre那個欄位,利用innerText之類的方法去做修改即可。

//變更score的字首
let score = document.querySelectorAll('tr>th')[2]
score.innerText = 'Score'

第三及第四部分,前半如同第一部分的做法,選取到所有分數的欄位後,在裡面填入Math.random產生的數字,較為不同的地方是這個部分採用template iterator的作法。

//將socre的內容變更為隨機數字並增加兩個icons
let scores = document.querySelectorAll(‘tr>td:nth-of-type(2)’)
for (i = 0; i<scores.length; i++){
let numbers = Math.floor(Math.random()*10)
scores[i].innerHTML = ` ${numbers} <i class="fa fa-plus-circle" aria-hidden="true"></i> <i class="fa fa-minus-circle" aria-hidden="true"></i> `
}

template iterator在重複修改時相當的實用,簡單來說就是建立一個版型重複利用,除此之外還可以直接看出建立的HTML架構,需要多練習來熟練~!
最後的結果會像這樣~!
https://codepen.io/yvkfgzhs/pen/WWLrxO?editors=1010

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s