Element Object 方法

本篇介紹用法

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

✐ DOM 操作

➤ document.querySelector() → 選擇網頁上的元素

• 透過組合 HTML 標籤與 class name 的方式取得指定的所有 HTML 元素中的第一個，若無則回傳 null

  練習：抓到整個結構
  

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

➤ document.querySelectorAll() → 重複選取多個元素

• 利用 Selector 來找尋 DOM 中的所有元素，並回傳， NodeList。
  

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

➤ 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');

➤ getElementsByName() →

• 取得第一個匹配 name 元素的對象

➤ .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%)");
    ​​​​​​​​});
    

  • 範例
• .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; // 圖片網址
  

  • 範例

Node節點

選擇到節點後，使用 以下方法 動態修改 html 內容

➤ Node.textContent → 修改文字

• 語法： Node.textContent

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

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

➤ .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 ;

監聽事件

➤ .addEventListener

• callback function
• .addEventListener('監聽動作', function(e){ ... })
  • 我們可以透過 監聽動作 來得知目前 DOM 所發生的事件，如點擊按鈕、按鍵盤
• 範例：輸出數字，更改貓貓幸運值

➤ e.target.nodeName

• e.target 會指向目前選取到的 DOM 物件
  • e 為 .addeventListener('監聽動作', function(e){ ... }) 中 function 的 e
• 搭配 nodeName 去得知目前點選的節點名稱

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

最後，親愛的大家！我需要你的大聲鼓勵 ٩(⚙ᴗ⚙)۶

如果覺得這篇文章對你有幫助，請給我個一個小小的鼓勵 ❤ 讓我知道，這會成為我寫下去很大的動力。
對了，我還有其他文章，如果有興趣也來逛逛吧！
(文章中如有覺得不妥之處、錯誤內容，也可以透過聯絡我，我會儘速改善，感謝！)

☞ YoJanni 珍妮 2021 正在設計轉職前端的路上，希望大家在學習的路上能夠一起成長
☞ 聯絡我

參考：
HTMLCollection 以及 NodeList ，兩個都是 Collection of DOM Nodes ，那到底差在哪呢？