JavaScript基礎5

14th鐵人賽

黃昱翔

2022-10-01 23:14:29

446 瀏覽

分享至

Element Object

透過querySelector()可以取得HTML Elememt Object

常用屬性

child:取得子元素 (HTMLCollection)
childNode:取得子元素 (NodeList)
parentElement:取得父元素
innerHTML:取得或更改元素中的內容 (當作HTML語言看)
innerText:取得或更改元素中的文字
classList:物件，取得元素中所有的class，有 add()、remove()、toggle()、contains() 做新增、刪除、相反、確認。

常用方法

getAttribute():取得屬性
querySelector():取得(指定)子元素
querySelectorAll:取得(指定)子元素 (NodeList)
appendChild():添加子元素
remove():移除該元素
addEventListener():事件，第一個參數為 Event Type。第二個為 call back function，裡面定義參數 e 為當前的 EventObject。

範例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>創建項目</button>
  </body>
  <script src="./app.js"></script>
</html>

let button = document.querySelector("button"); //取得button
let body = document.querySelector("body"); //取得body
let count = 1;

button.addEventListener("click", () => {  //按鈕點擊事件
  let myH = document.createElement("h1"); //創建h1
  myH.innerText = "項目" + count;
  body.appendChild(myH); //添加至body裡
  count++;
});

當點擊按鈕時會跳出項目

【以上為我的學習心得，如有錯誤歡迎糾正】