# JavaScript - DOM 選取網頁元素
###### tags: `javascript` `DOM`

## DOM 選取網頁元素
* DOM = document object model

### querySelector 選擇器
* document.querySelector 只會去抓網頁第一個 DOM

// 宣告一個變數 el
// 選取網頁上的元素 h1 標籤
const el = document.querySelector('h1');

### textContent 寫入文字資料
* 運用 js 動態改變網頁上的元素內容

<h1 class="title">我是標題</h1>
<h2 class="subtitle">我是副標題</h2>

// 宣告變數選取網頁節點 -> 簡化程式碼
// 用.選取 class
const el = document.querySelector('.subtitle');
el.textContent = "111";

// 這樣選取也能達到同樣效果，但程式碼較冗長
document.querySelector('.subtitle').textContent = "Hello!!!";

### innerHTML 插入 HTML 標籤
* 加入 HTML 標籤使用
* 會把所選取節點內的預設內容清掉，再重新賦予新的值進去。（注意：非累加）

<div class="main">
    <p>段落</p>
</div>

const main = document.querySelector('.main');
main.innerHTML = `<h3>標題一</h3>`;

### innerHTML 加入變數＆組資料

<ul class="list">
    <li><a href="https://www.google.com">連結一</a></li>
</ul>

const list = document.querySelector('.list');

// 加入變數
let myLink = "https://www.yahoo.com";
let myName = "QQ";
let content = `<li><a href="${myLink}">${myName}連結二</a></li>`
list.innerHTML = content + content; //字串相加組資料

### textContent 與 innerHTML 運用差異
* innerHTML：用於新增 HTML 網頁結構、網頁標籤、元素、屬性及節點，會編譯成網頁結構。
* textContent：用於新增網頁「文字」內容。

<div class="main"></div>

const main = document.querySelector('.main');

// innerHTML
main.innerHTML = `<h3>標題三</h3>`; 
// 網頁渲染出標題字「標題三」

// textContent
main.textContent = `<h3>標題三</h3>`;
// 網頁渲染出文字「<h3>標題三</h3>」

### setAttribute 增加 HTML 標籤屬性
* setAttribute：設定增加 HTML 標籤屬性
* 參數1:要改的屬性 / 參數2:要加入的內容

<a href="#">連結</a>

<!-- 設定一個紅色的 CSS 樣式 -->
<!-- 透過 js 動態加入 class -->
<style class="red">
    .red {
        color: red;
    }
</style>

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

// setAttribute(num1,num2)
// 設定裡面其中一個屬性 參數1:要改的屬性 / 參數2:要加入的內容

// 更新 href 連結為 yahoo 網址
myLink.setAttribute("href", "https://tw.yahoo.com/");
// 動態加入 class = "red"
myLink.setAttribute("class", "red");

### querySelectorAll 可重複選取多個元素

<a href="#">連結</a>
<a href="#">連結</a>

<!-- 設定一個紅色的 CSS 樣式 -->
<!-- 透過 js 動態加入 class -->
<style class="red">
    .red {
        color: red;
    }
</style>

// document.querySelector 只會去抓網頁第一個 DOM
// const myLink = document.querySelector('a');

// 改用 querySelectorAll 選取多個元素
const myLinks = document.querySelectorAll('a');
console.log(myLinks); // 回傳[陣列]資料 - NodeList (節點列表)

// 選取陣列資料 使用[數字]讀取
myLinks[0].setAttribute("href", "https://tw.yahoo.com/");
myLinks[0].setAttribute("class", "red");

myLinks[1].setAttribute("href", "https://tw.google.com/");
myLinks[1].setAttribute("class", "red");

### .innerHTML、.textContent、.getAttribute 取值方法
* .getAttribute(); 取得網頁元素值
* .innerHTML 取得 HTML 內容
* .textContent 取得文字

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

<!-- 設定一個紅色的 CSS 樣式 -->
<!-- 透過 js 動態加入 class -->
<style class="red">
    .red {
        color: red;
    }
</style>

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

// 取得網頁元素值 getAttribute()
console.log(myLink.getAttribute("href")); // https://tw.yahoo.com/
console.log(myLink.getAttribute("class")); // red

// 取得 HTML 內容：innerHTML
console.log(myLink.innerHTML); // <span>連結</span>
let content = myLink.innerHTML;
console.log(content); // <span>連結</span>

// 取得文字：textContent
console.log(myLink.textContent); // 連結

### 表單元素 - 取值方式 vs. 賦值方式
* 取值方式：可以用 . 取得表單元素 value 值
* 賦值方式：可以用 = 賦值

<!-- 輸入框 - 預設值"最新資訊" -->
<input type="text" class="txt" value="最新資訊">

<!-- 下拉選單 - 預設值"高雄市" -->
<select class="list" name="" id="">
    <option value="高雄市">高雄市</option>
    <option value="台北市">台北市</option>
</select>

// 選取 input 標籤
const txt = document.querySelector('.txt');
console.log(txt);

// 可以用 . 取得 value 的值
console.log(txt.value); 

// input 標籤重新賦值 (覆蓋掉"最新資訊")
txt.value = "NEWS!!!";



// 選取 select 標籤
const list = document.querySelector('.list');

// 下拉選單 - 預設值改為"台北市"
list.value = "台北市";
console.log(list.value);