DOM - 選取網頁元素 === 瞭解 document 的重要性 --- > *網頁瀏覽器在解析時，會先產生出document，document 裡有Element 的資料。 當需要選取元素時，就可以透過DOM 功能很友善的選取到內容。 當網頁一打開，就自動產生document (網頁一打開就解析好了) 。 網頁一解析完網頁內容後，會產生DOM tree (節點樹狀圖)，產生各種節點來方便做讀取。* > 了解如何透過 JavaScript 去操控 DOM，就可以輕鬆地去執行網頁裡的節點。 ![](https://i.imgur.com/3mG8jMz.png) 當在 console 輸入 document，會回傳 “回傳整個文件的文本”，把整個內容都解析出來。 ![](https://i.imgur.com/USNX4RM.png) DOM 環境配置 --- ```javascript= <script src="all.js"></script>` ``` 以上這段程式碼可以放在`<head>`裡或`<body>`裡 但在DOM裡此段程式碼只能放在`</body>`前面 * 網頁一瀏覽器打開，HTML程式碼會一行一行執行，HTML標籤由上到下都解析成 DOM 節點，才可以使用 JavaScript 去抓取裡頭的內容。 若把`<script src="all.js"></script>`放在`<head>`裡，則無法讀取HTML節點(原因是HTML標籤節點還沒解析出來) querySelector 選擇器 --- 如何透過JavaScript程式語法抓取DOM裡面的網頁元素。 網頁一打開就會自動產生 DOM，document 是根節點，在此文件上就可做各種操作。 >document 為物件格式，裡面有許多方法及網頁元素就可讀取到。 ```javascript= // HTML 標籤 <h1>1234</h1> <a class="link" href="#">連結 link</a> ``` ### 先宣告const變數，變數名稱為el一個值為"DOM的節點"，節點要抓取的元素位置在document文件資料裡，使用querySelector方法來選取網頁上的元素，網頁元素為h1標籤。 `const el = document.querySelector('h1'); // JS 部分` 程式碼拆解解釋 * document:在文件裡尋找 * querySelector:選取網頁上的元素 * CSS選擇器(如HTML標籤、CSS類別、id選擇器..等):尋找h1的HTML標籤 至「開發人員工具」查看`<h1> `標籤元素。 ![](https://i.imgur.com/1BbXZDO.png) textContent 寫入文字資料 --- 學習對DOM裡的Element來動態修改裡面的文字內容。雖然網頁寫完了，還是可以透過JS來修改、新增、刪除網頁元素。 > textContent 文字節點 : 動態更改文字內容。 ```javascript= // HTML 部分 <h1>1234</h1> ``` ### 透過一個變數宣告起來，把變數指向到DOM網頁元素位置去。直接選取變數來更改網頁文字內容、並重新賦予值。 ```javascript= //JS部分 const el = document.querySelector('h1'); el.textContent = "hello world"; //寫法較簡潔 document.querySelector('h1').textContent = "333"; //寫法較冗長 ``` 前段寫法程式碼較簡短，不用每次都重新寫`document.querySelector('h1')`。 另外也可以在「開發人員工具」的console直接使用textContent修改文字。 innerHTML 插入 HTML 標籤 --- innerHTML : 增加網頁節點結構(放HTML標籤結構內容) innerHTML特性:會把原本選取的「網頁節點」**預設內容全部清空**，再放入自己新增的內容 字串頭尾可使用「反引號 ``」(ㄅ左邊) 或「雙引號 “ “」或「單引號 ’ ‘」包起來。 * 字串頭尾若使用「單引號 ’ ‘」包起來，內層的 class 屬性要使用「雙引號 “ “」，否則 JavaScript 無法判斷這是屬性還是字串會跳錯。 * 建議作法 : 字串頭尾若使用「反引號 ``」(ㄅ左邊)包起來，才不會與內層的**屬性或變數**有衝突。 ```javascript= // HTML <div class="main"> <p>hello!</p> </div> ``` 針對 `<div class="main">` 來新增` <h1> `標籤。 * 選取 `<div class="main">` 網頁元素，希望可以增加網頁結構，網頁結構為自己組出的字串資料。 ```javascript= // JavaScript const main = document.querySelector('.main'); console.log(main); // (如下左圖) 選取到 main 的元素 main.innerHTML = `<h1 class="header"> 標題 </h1>`; // (如下右圖) 放入字串格式資訊 ``` ![](https://i.imgur.com/SRW2jdq.png) innerHTML 加入變數 --- ```javascript= // HTML <ul class="list"></ul> ``` 字串內可以帶變數 ```javascript= //javascript const list = document.querySelector(".list"); console.log(list); //先觀察是否有抓到list元素節點 ``` 確定有抓到list元素節點再往下加入HTML標籤和變數 ![](https://i.imgur.com/i6LlPni.png) ```javascript= let myLink = "https://www.google.com.tw " let myName = "阿武"; let content = `<li><a href="${myLink}">${myName}連結</a></li>`; list.innerHTML = content + content; //使用innerHTML插入contnet字串結構 ``` 萬一相同變數很多的時候，就變數做更改數值，增加效率。 textContent 與 innerHTML 運用差異 --- * innerHTML:可以產生出element裡的內容(元素、文字、屬性...等節點)。新增HTML標籤的網頁結構(重新編譯DOM節點)。 * textContent:只單純修改文字(變成文字節點)。 使用innerHTML來新增HTML標籤的網頁結構 ```javascript= main.textContent = `<h1>標題</h1>`; console.log(main); ``` ![](https://i.imgur.com/D2y4tDE.png) * 使用textContent來修改文字 ```javascript= main.textContent = `<h1>標題</h1>`; console.log(main); ``` ![](https://i.imgur.com/pRQTu6Q.png) setAttribute 增加 HTML 標籤屬性 --- setAttribute("新增或修改的屬性","新增或修改的屬性內容"):設定HTML標籤裡的屬性，會帶兩個參數值。 ```htmlmixed= <a href="#">連結</a> <style> .red { color: red; } </style> ``` 更改`a連結`裡的屬性 ```javascript= const myLink = document.querySelector("a"); console.log(myLink); //先觀察是否有抓到myLink元素節點 ``` 對網頁上的`a連結`結構裡**修改**href屬性內容及裡**新增** class 屬性來改變顏色。 ```javascript= myLink.setAttribute("href", "https://www.google.com.tw"); myLink.setAttribute("class", "red"); ``` ![](https://i.imgur.com/zi8imwG.png) querySelectorAll 可重複選取多個元素 --- ```html= //html <a href="#">連結</a> <a href="#">連結</a> <style> .red { color: red; } .blue { color: blue; } </style> <script src="all.js"></script> ``` ### 語法`document.querySelector('')`只會抓網頁第一個DOM元素 ### 語法`document.querySelectorall('')` 抓取相同名稱的DOM元素。回傳"陣列"，需使用陣列方法來選取DOM做操作。 ```javascript= const myLinks = document.querySelectorAll("a"); console.log(myLinks); //回傳一個節點列表，如下圖 ``` ![](https://i.imgur.com/BVTD2O5.png) > *由此得知，myLinks 是一個陣列。* 選取陣列 myLinks 的第一筆網頁節點 DOM，新增屬性內容。 ```javascript= myLinks[0].setAttribute("href", "https://www.google.com.tw"); myLinks[0].setAttribute("class", "red"); ``` 選取陣列 myLinks 的第一筆網頁節點 DOM，修改屬性內容。 ```javascript= myLinks[1].setAttribute("href", "https://www.yahoo.com.tw"); myLinks[1].setAttribute("class", "blue"); ``` .innerHTML、.textContent、.getAttribute 取值方法 --- ```javascript= //HTML <a href="https://www.yahoo.com.tw" class="red"><span>連結</span></a> <style> .red { color: red;; } </style> <script src="all.js"></script> //javascript const myLink = document.querySelector('a'); console.log(myLink); //先觀察是否有抓取到myLink元素節點 ``` ![](https://i.imgur.com/edCQTUb.png) 取出屬性 href 的內容 ```javascript= console.log(myLink.getAttribute("href")); console.log(myLink.getAttribute("class")); ``` ![](https://i.imgur.com/MUgRVH1.png) 使用 innerHTML 取出` <a> 標籤` 內的結構 ```javascript= console.log(myLink.innerHTML); let content = myLink.innerHTML; //把 myLink.innerHTML 結果指向給變數 content console.log(content); ``` ![](https://i.imgur.com/jinPgtH.png) 使用textContent取出文字節點 ```javascript= console.log(myLink.textContent); ``` ![](https://i.imgur.com/OHqw0Xn.png) 表單元素取值方式 --- 範例一: input ```html= // HTML <input type="text" class="txt" value="你好嗎?"> ``` 使用JavaScript來變更文字內容 ```javascript= //javascript const txt = document.querySelector(".txt"); txt.value = "你好喔!"; console.log(txt.value); ``` 範例二 : 「下拉式選單」 ```HTML= //HTML <select class="list"> <option value="高雄市">高雄市</option> <option value="台北市">台北市</option> </select> ``` 使用JavaScript來變更文字內容: ```javascript= //JavaScript const list = document.querySelector(".list"); list.value = "台北市"; console.log(list.value) ``` ![](https://i.imgur.com/yd0DeC1.png)