筆記一下在學習撰寫 JavaScript DOM時，常會遇上的三大功能 innerHTML, textContent 與 event.target 的用法。
重點整理
innerHTML
常搭配 HTML 的 Element Object 來執行，將一段 HTML Code 寫入特定區塊。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 以下例子取自 w3school.com <!DOCTYPE html> <html> <body> <a id="myAnchor" href="http://www.microsoft.com">Microsoft</a> <button onclick="myFunction()">Change link</button> <script> function myFunction() { const myAnchor = document.getElementById("myAnchor") myAnchor.innerHTML = "W3Schools"; myAnchor.href = "https://www.w3schools.com"; myAnchor.target = "_blank"; } </script> </body> </html> |
textContent
使 JavaScript 存取or寫入純文字內容
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// 資料來源為 www.w3school.com <!DOCTYPE html> <html> <body> <ul id="myList"><li id="item1">Coffee</li><li id="item2">Tea</li></ul> <p id="demo">Please click here to get all messages。</p> <button onclick="myFunction()">Try</button> <script> function myFunction() { var lst=document.getElementById("myList"); var x=document.getElementById("demo"); x.innerHTML=lst.textContent; } </script> </body> </html> |
event.target
一個 click 事件綁定在button上，然後觸發了 click。此處的 event.target 就是指事件發生位置
|
1 2 3 4 5 6 |
// 監聽事件的發生的HTML位置 dataPanel.addEventListener('click', (event) => { if (event.target.matches('.btn-show-movie')) { showMovie(event.target.dataset.id) } }) |
按讚加入粉絲團
