# Element Object 方法
<div class="block">

**本篇介紹用法**
- DOM 操作
- `document.querySelector` `document.querySelectorAll` `document.getElementById` `getElementsByName`
- 抓出 DOM 屬性
- `.setAttribute` `.getAttribute`
- `.value` `.type` `.src`
- Node節點更改
- `.textContent` `.innerHTML`
- 監聽事件 `.addeventListener`
- 使用 `e.target.nodeName` 得知目前點選的節點名稱
- 觸發事件
- `.onclick` `.mouseover`

</div>

## ✐ DOM 操作
### ➤ `document.querySelector()` → 選擇網頁上的元素
- 透過組合 HTML 標籤與 class name 的方式取得指定的所有 HTML 元素中的<font color="red">第一個</font>，若無則回傳 null

練習：抓到整個結構

    const el = document.querySelector('h1');
    // 宣告一個 const 叫 el 賦予 dom的節點(原本是賦予 型別 或是 物件，也可以dom 的節點)，
    // document 是本身瀏覽器一打開就會產生一個 document 的文件資料，
    // 可以借有這樣讀取dom產生的物件格式去抓取其中的標籤 .querySelector(' ')，在小括號內可以使用各種選擇器
    
    // 只會去抓網頁裡面的第一個 dom ，也就是說假設有很多 h1，他只會抓第一個。

<br>
<br>

### ➤ `document.querySelectorAll()` → 重複選取多個元素
- 利用 Selector 來找尋 DOM 中的所有元素，並回傳， **NodeList**。

<small>*上圖）抓取到兩個 a 連結，所以會回傳陣列[a, a]*</small>

<br>
<br>

### ➤ `document.getElementById` →
要獲取綁定 Id 的元素，可以使用getElementById
- 返回第一個匹配 ID 元素的對象
- 語法：`var element = document.getElementById(id);`

使用方式如下：
HTML：

<button id="addTodo" type="button">新增</button>

JavaScript：

// 透過 getElementById 獲取 id 為 addTodo 的元素
const addTodo = document.getElementById('addTodo');

<br>
<br>

### ➤ `getElementsByName()` →
- 取得第一個匹配 name 元素的對象

<br>
<br>

### ➤ `.getElementsByClassName` 取得特定 class名稱
用法：

document.getElementsByClassName(names)

---

## ✐ DOM 屬性
- `.setAttribute("要更改的屬性","更改內容");`
- 透過 setAttribute 來設定指定元素上的屬性

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

javascript:

    //先透過 querySelector 選取 a Element
    const myLink = document.querySelector('a');

    //設定該 Element 的 href 屬性
    myLink.setAttribute("href","https://www.hexschool.com");

    //設定該 Element 的 class 屬性
    myLink.setAttribute("class","red");

- `.getAttribute("要取出內容的屬性")`
- 透過 getAttribute 來取出指定元素上的屬性

    //先透過 querySelector 選取 a Element
    const myLink = document.querySelector('a');

    //取出該 Element 的 href 屬性
    console.log(myLink.getAttribute("href"));//"https://www.hexschool.com"

    //取出該 Element 的 class 屬性
    console.log(myLink.getAttribute("class"));//"red"

- `style` 加入 filter

        button.addEventListener("click", () => {
          picture.setAttribute("style","filter: grayscale(80%)");
          button.setAttribute("style","filter: grayscale(80%)");
        });

- 範例
<iframe height="300" style="width: 100%;" scrolling="no" title="8/17 (二) － setAttribute、getAttribute 實作" src="https://codepen.io/unayo/embed/mdmYYEo?default-tab=js&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unayo/pen/mdmYYEo">
8/17 (二) － setAttribute、getAttribute 實作</a> by unayo (<a href="https://codepen.io/unayo">@unayo</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
- `.value`
- 透過 .value 來取出表單元素 Elements
- 抓出的值都是字串 string
HTML:

    <input type="text" class="txt" value="你好棒！">

Javascrip:

    //先透過 querySelector 選取 class txt
    const txt = document.querySelector(".txt");
    console.log(txt.value)
    //你好棒！

    txt.value = "大家都很棒！";
    // 透過賦予改變原本 value 的內容

- `.type`
- 返回表單類型(text,radio, button...)
- `src` 圖片網址

    const amimalImage = document.querySelector('.amimalImage').src; // 圖片網址

- 範例
<iframe height="300" style="width: 100%;" scrolling="no" title="8/16 (一) － DOM 選取網頁元素" src="https://codepen.io/unayo/embed/qBmGomB?default-tab=js&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unayo/pen/qBmGomB">
8/16 (一) － DOM 選取網頁元素</a> by unayo (<a href="https://codepen.io/unayo">@unayo</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## Node節點
選擇到節點後，使用 `以下方法` 動態修改 html 內容
### ➤ Node.textContent → 修改文字
- 語法： `Node.textContent`

//使用 querySelector 選取到 h1 Element
const el = document.querySelector('h1');

// 針對該 h1 元素 Element 去賦予文字內容
el.textContent = "Hello World";

<br>
<br>

### ➤ `.innerHTML` → 插入一段程式碼
- 使用 innerHTML 來增加 HTML 網頁結構，innerHTML 會將選取到的結構內原有內容刪除，並重新寫入新增的內容
- 容易被串改資料

//使用 querySelector 選取到 class 
const list = document.querySelector('.list');
let myLink = "https://www.hexschool.com/";
let content = `<li><a href="${myLink}">連結</a></li>`;

//針對該 class 內去增加網頁的結構，亦可包含變數
list.innerHTML = content ;

<br>
<br>

## 監聽事件
### ➤ `.addEventListener`
- callback function
- `.addEventListener('監聽動作', function(e){ ... })`
- 我們可以透過 監聽動作 來得知目前 DOM 所發生的事件，如點擊按鈕、按鍵盤
- 範例：輸出數字，更改貓貓幸運值
<iframe height="300" style="width: 100%;" scrolling="no" title=" 8/18 (三) － 表單欄位取值" src="https://codepen.io/unayo/embed/WNOedOz?default-tab=js%2Cresult&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unayo/pen/WNOedOz">
8/18 (三) － 表單欄位取值</a> by unayo (<a href="https://codepen.io/unayo">@unayo</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### ➤ `e.target.nodeName`
- `e.target` 會指向目前選取到的 DOM 物件
- `e` 為 `.addeventListener('監聽動作', function(e){ ... })` 中 `function` 的 `e`
- **搭配 nodeName 去得知目前點選的節點名稱**
<iframe height="300" style="width: 100%;" scrolling="no" title="8/19 (四) － e.target 搭配 nodeName 節點" src="https://codepen.io/unayo/embed/RwgbeVM?default-tab=js%2Cresult&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/unayo/pen/RwgbeVM">
8/19 (四) － e.target 搭配 nodeName 節點</a> by unayo (<a href="https://codepen.io/unayo">@unayo</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

HTML：

<ul class="list">
  <li>內文</li>
  <li>內文<button type="button">按鈕</button></li>
  <li>內文</li>
</ul>

JavaScript：

//先透過 querySelector 選取 class list
const list = document.querySelector(".list");

//監聽剛剛設定的 list 裡，點擊就會執行大括號的內容
list.addEventListener("click", function (e) {

//大括號內容： 監聽使用者的點擊到的是否為 <button></button> 按鈕
  if (e.target.nodeName === "BUTTON") {
    console.log("123"); 
  }
});

## 觸發事件
### ➤ .onclick
### ➤ .mouseover

###### tags: `JS`
{%hackmd @unayojanni/H1Qq0uKkK %}

> 參考：
> [HTMLCollection 以及 NodeList ，兩個都是 Collection of DOM Nodes ，那到底差在哪呢？](https://ithelp.ithome.com.tw/articles/10202689)