DOM 簡單介紹

# DOM 簡單介紹 ###### tags: `JavaScript` `JS 直播班 - 2021 秋季班` DOM 全名為 Document Object Model(文件物件模型)，其實就是把一份 HTML 文件內的各個標籤，包括文字、圖片等等都定義成物件，而這些物件最終會形成一個樹狀結構(又名: DOM Tree)。 1. Document 是一個物件(也是window object的property) 2. Document指的是HTML document. 3. this model means all HTML elements are objects. ![](https://i.imgur.com/LivaUIn.gif) ![](https://i.imgur.com/fXDb9p7.png) 在最根部的地方，就是 document，就是 BOM 圖中 window 下面的那個。往下可以延伸出一個個的 HTML 標籤，一個節點就是一個標籤，往下又可以再延伸出屬性的節點。 DOM API 就是定義了讓 JavaScript 可以存取、改變 HTML 架構、樣式和內容的方法，甚至是對節點綁定的事件。 JavaScript 就是透過 DOM 提供的 API 來對 HTML 做存取與操作。 ## 簡單介紹 DOM 的幾個 API (METHOD) ### DOM 元素查詢 利用DOM抓取HTML的元素 ```=JavaScript document.getElementById(id) # 根據 id 來取得元素 document.getElementsByTagName(name) # 根據標籤 tag 來取得元素 document.getElementsByClassName(name) # 根據 class 名稱來取得元素 document.querySelector(selectors) # 根據 CSS 選擇器 (CSS selectors) 來取得符合條件且第一個找到的 HTML 元素。 document.querySelectorAll(selectors) # 根據 CSS 選擇器 (CSS selectors) 來取得所有符合條件的 HTML 元素集合 (NodeList)。 ``` ### DOM 元素變更 ```=JavaScript // element代表DOM所抓取到的元素 element.innerHTML = new html content # 改變 HTML 內文 element.innerText = new html content # 改變 HTML 內文 element.textContent= new html content # 改變 HTML 內文 element.attribute = new value # 改變屬性 element.style.property = new style ＃改變style element.setAttribute(attribute, value) # 改變屬性 ``` #### innerText 跟 innerHTML 跟 textContent 的差異 ```=JavaScript // innerHTML 、 innerText、textContent let h1=document.querySelector("h1.myh1"); let h2 =document.querySelector('h2.myh2'); let mytext=document.querySelector("h1.mytext"); // innerHTML的效果= <h1 class="myh1">today is a good day.</h1> // 當使用innerHTML時，會把原本寫的東西都先刪除再放入新寫的東西 // 不過innerHTML優先權較高 // innerText效果幾乎跟innerHTML一樣 //唯一的不同: innerHTML會被當成程式碼來閱讀， innerText會被當成字串閱讀 h1.innerHTML="today is a good day"; h2.innerText="today is a good day"; mytext.textContent="today is a good day"; //textContent為修改文字內容 //跟innerText差不多 ---------------------------------------------------------------------------- 編譯結果: ``` ![](https://i.imgur.com/WFgU4Eg.png) ## 透過 DOM 和 JS 在網頁上印出 Hello world ### HTML 建立標籤 先在HTML建立一個p標籤，並套用你的JS檔案 ```=HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="/test.js"></script> </body> </html> ``` ### 利用 DOM 查詢p標籤 利用querySelector抓取HTML裡面的p標籤 ```=JavaScript let myH1= document.querySelector('p'); ``` ### 利用 DOM 修改p的內容 利用innerText將p的內容修改成hello world ```=JavaScript myH1.innerText='hello world'; ``` ### 網頁顯示結果 ![](https://i.imgur.com/p4X3lmA.png)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.