[day-9] DOM-選取網頁元素

dom tree

首先先了解什麼是DOM
網頁瀏覽器在解析的時候
他會把這個東西變成dom tree 節點樹狀圖

可以看到他就是由document去分支
會有很多個Element元素 也會在分支有Attribute屬性等
那這些就可以幫助你抓出這些元素用JS動態去更改他們
像是可以更改a連結的網址、更改h1標題等等
當你已解DOM之後才可以真正進入到網頁來去做互動

大家可以試試看在瀏覽器右鍵選擇檢查
找到主控台 輸出 document 就可以看到回傳到整個文件的文本
他幫你把所有的內容都解析出來
好處就是你可以從DOM的地方很好的選取出你要的內容

DOM環境建置

那接下來教的是怎麼開始用DOM這個方式
首先之前都會教把<script src"all.js"></script>放在head
那現在要把他剪下 貼在</body>的前一行(所有內容之後)

那為什麼開始講到DOM之後這個東西要放在後面
原因是網頁今天解析是從頭讀取到尾
如果今天還沒執行到body的內容去讀取有哪些元素(ex:h1、a)
那在head執行的all.js檔就會讀取不到

所以放後面的目的就是要先讓body的內容都產生結點後
再執行all.js才能來抓取到這些節點

querySelector 選擇器

接下來就要教如何透過DOM來選取到網頁的元素
document.querySelector('css選擇器')
``
//選取 h1
//宣告一個const的變數el 選取網頁上元素 'css選擇器'
const el = document.querySelector('h1');

//選取class .header
const el = document.querySelector('.header');
``

textContent 寫入文字資料

先宣告變數選取元素 在賦予字串在元素
.textContent 修改文字節點 更改文字內容

//較好的做法

//宣告一個const的變數el 選取網頁上元素 'css選擇器'
const el = document.querySelector('h1');
//再從變數去賦予字串
el.textContent = "hello World!!"

//第二個做法直接改
document.querySelector('.header').textContent = "hello World!"

為什麼第一種做法會比較好 因為宣告完變數後
就可以做很多變化和修改
不需要每次都多寫document.querySelector這行

innerHTML 插入 HTML 標籤

.innerHTML 將原始內容清空 插入新的內容

//在main class div新增一個h1和內容

const main =document.querySelector('.main')
//可以新增一串自己組出來的資料
main.innerHTML=`<h1 class="header">我是一段標題</h1>`

//！！！但這邊特別注意 innerHTML是將原始class裡面的資料全部清空
再加入新寫的資料 因此HTML裡面原始資料都會被清空

innerHTML 加入變數

那innerHTML裡面也可以加入變數
來讓資料日後要修改更方便

const list = document.querySelector(".list")

let myLink = "https://www.yahoo.com.tw";
let meName = "yahooooo";
let content = `<li><a herf="${myLink}>${myName}連結</a></li>`
list.innerHTML = content+content;

會需要學會這些用法是因為
以後可能會用到很多陣列、物件的資料
就需要在這裡將每筆資料組出想要的結構
再去呈現到html上面

textContent 與 innerHTML 運用差異

可以看到這張圖
圈起來的是元素
如果說今天你想改的是整個元素
那就是使用innerHTML

那在看到框起來的是他裡面的內容
如果只是要改內容 就是使用textContent

主要差別在這邊

main.innerHTML = `<h1>標題</h1>;` //會新增一個h1的結構放進去

main.textContent = `<h1>標題</h1>;` //會把整段以純文字形式呈現

setAttribute 增加 HTML 標籤屬性

如果想要改變a連結的屬性

const myLink = document.querySelector("a");

//可以讓herf=後面的內容新增這串連結
myLink.setAttribute("herf","https://www.yahoo.com.tw");

//可以新增class="red" (但是class style的內容還是要預先設定過)
myLink.setAttribute("class","red");

querySelectorAll 可重複選取多個元素

前面學到querySelector可以選擇元素的部分
但如果同時有兩個相同名稱的元素
querySelector也只會選取到最前面的那個元素

這時候就需要用到querySelectorAll

const myLink = document.querySelectorAll("a");

console.log(myLink); //這時候會回傳給你節點列表 
//列出所有選取到的節點 以陣列呈現

//由於他是以陣列的方式存取 因此myLink[0]就可以選出要選取哪一個
myLink[0].setAttribute("herf","https://www.yahoo.com.tw");

//myLink[1]就會選到節點陣列的第二筆資料
myLink[1].setAttribute("herf","https://www.google.com.tw");

那等到未來教到forEach for迴圈 就不會這樣需要打那麼多行
目前只是先讓各位知道有這個方式

.innerHTML、.textContent、.getAttribute 取值方法

.innerHTML抓整段結構
.textContent抓結構內的文字內容
.getAttribute抓結構內的元素值

html內容

<a href="www.yahoo.com.tw" class="red"><span>連結</span></a>

js取值的方法

//.innerHTML、.textContent、.getAttribute 取值方法

const myLink = document.querySelector("a"); //選取到a標籤

console.log(myLink.getAttribute("href")); //取出他的href值
console.log(myLink.getAttribute("class")); //取出他的class值
console.log(myLink.innerHTML); //取出整段結構
console.log(myLink.textContent); //取出結構內的文字內容

如果是表單元素

input裡的資料 如value可以用.value來取

html內容

<input type="text" class="txt" value="您好嗎?">
    <select class="list">
        <option value="高雄市">高雄市</option>
        <option value="台北市">台北市</option>
    </select>

js取值或改動的方法

const txt = document.querySelector(".txt"); //先將txt選取到該class

console.log(txt.value); //會印出value的值 您好嗎?
txt.value = 123; //將value從您好嗎? 改成 123

const list = document.querySelector(".list");
list.value = "台北市"; //重新賦予值台北市