###### tags: `JavaScript 學習筆記` # JavaScript 學習筆記 - 7: DOM (Document Object Model) ## 節點樹 ![](https://i.imgur.com/wvj4U8b.png) 只要產生一個網站 就會出現節點樹 Dom Tree (如上圖) 在檢查(F12)中輸入 document 可得到整份文件 ## 環境設置 把`<scrip scr="all.js"></scrip>` 從`<head>`移到`<body>`的最後一行 好處: 會由上到下等全部跑完抓取所有的節點, 放前面會抓不到特定資料 ## 抓取資料: qureySelector 選擇器 ``` document.querySelector(".Selector"); ``` ## 寫入文字資料: textContent ``` document.querySelector(".Selector" or "tag").textContent = "XXXXX"; ``` 或 ``` const a = document.querySelector(".Selector"); a.textContent = "XXXXX"; ``` 都可達到同樣動態更改文字的效果 ## 插入網頁元素 HTML標籤: innerHTML 用來增加網頁結構，會把原本的預設內容刪除 ``` const main = document.querySelector(".main"); main.innerHTML = `<h1 class="header"><span>XXX</span></h1>` ``` ## 用 innerHTML 加入變數 ``` const list = document.querySelector(".list"); let myLink = "##"; let myContent = "XXX" list.innerHTML = `<li><a href="${myLink}">${myContent}</a></li>` ``` 會在 HMTL 檔案裡的 .list 新增內容，覆蓋掉原本的內容 想更改變數就可輕鬆更改 也可寫成： ``` let content = `<li><a href="${myLink}">${myContent}</a></li>` list.innerHTML = content + content ``` ### textContent 和 innerHTML 的差異 | textContent | innerHMTL | | -------- | -------- | | 改變文字部分 | 改變網頁結構 | ## 增加 HTML 標籤屬性: setAttribute 變數.setAttriubte("要新增的屬性 Attribute", "要新增的屬性內容"); ``` const myLink = document.querySelector("a"); myLink.setAttribute("href", "#"); mylink.setAttribute("class", "red"); ``` Note: 需先有描述屬性的內容，才可直接寫 "red" ## 重複選取多個元素: querySelectAll querySelect 只會選取抓取到的第一個，只回傳一個DOM ``` const myLinks = document.querySelectorAll("a"); myLinks[0].setAttribute("href", "#"); mylinks[0].setAttribute("class", "red"); ``` ## 取值方法 | .innerHTML | .textContent | .getAttribute | | -------- | -------- | -------- | | 取出指定標籤內的<br>HTML 結構 | 取出節點<br>故只會取出文字資訊 | 取出 Attribute Name | ## 表單元素取值方式 ### .value 可以取值也可以賦值 ###