Day16 DOM方法和屬性

2022 iThome 鐵人賽

DAY 16

Modern Web

Javascripts惡補小教室系列第 16 篇

14th鐵人賽

karta1366796

團隊imac_柬埔寨7日遊

2022-10-01 00:05:48

641 瀏覽

分享至

DOM類型

介紹完DOM概念以後，我們可以繼續探討DOM能做到的事情，與改變的元素如何運行。HTML DOM方法是我們在HTML元素上可以去執行的動作，而HTML DOM屬性是我們可以改變或設置HTML元素的值。

DOM編序介面
在透過Javascript訪問HTML DOM時，所有的HTML元素都會被認為是物件!而編序介面是每個物件所擁有的方法和屬性。
屬性是能夠獲取和設置的值(例如得到一個段落內的HTML內容)。
方法是能夠執行的識見與動作（例如新增或刪除HTML元素）。

下面舉個範例示範方法與屬性的不同。
範例:

<body>

<p id="demo"></p>

<script>
document.getElementById("main").innerHTML = "HI!,Jason";
</script>

</body>

document就是我們的文檔，而getElementById是方法，innerHTML是屬性。

getElementById方法
在獲取HTML元素中我們必須抓取元素的id，所以透過getElementById方法來尋找id叫main的元素。

innerHTML 屬性
元素的內容我們使用innerHTML去獲取，返回裡面的內容，可以進行抓取及更改HTML元素。

HTML DOM Document 物件

DOM Document代表我們整個網頁，而我們要訪問網頁中的內容，肯定要從網頁開始!所以方法前總是會加上document.xxx來進行訪問元素，列出了以下幾種方法!

尋找Html元素

document.getElementById(id) 透過元素id尋找元素
document.getElementsByTagName(name) 透過標籤name尋找元素
document.getElementsByClassName(name) 透過分類class尋找元素

改變HTML元素

element.innerHTML = new html content 改變元素HTML內容
element.attribute = new value 改變元素的屬性
element.style.property = new style 改變元素的樣式

新增和刪除元素

document.createElement(element) 創建HTML元素
document.removeChild(element) 刪除HTML元素
document.appendChild(element) 新增HTML元素(跟創建不同於創建是從0開始，append有原本就有東西，而後再新增的意思)
document.replaceChild(element) 取代HTML元素
document.write(text) 寫入HTML輸出

事件處理方法

document.getElementById(id).onclick = function(){code} 當按鈕按下時執行方法。

今天的DOM就介紹到這邊了!對於DOM還有許多細節可以介紹，接下來的文章就讓我們繼續往下看八!

Day15 Javascript HTML DOM

Day17 Javascript表單驗證

系列文

Javascripts惡補小教室共 30 篇

RSS系列文訂閱系列文

8 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

88 組

團體組數

1 組

累計文章數

58 篇

最後報名日

9/15

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙

Javascripts惡補小教室系列 第 16 篇