大家好，我是一名菜鳥工程師，Chris，今天來到第 13 天，JS 的 Math 物件和 DOM 方法

Math物件 : 各種數學運算和數學常數

1 Math.round()： 將所給數字四捨五入到最接近的整數

console.log(Math.round(4.655)); // 印出 5

2 Math.floor(): 會取小於等於所給數字的最大整數

console.log(Math.floor(4.899)); // 印出 4

3 Math.ceil(): 會取大於等於所給數字的最小整數

console.log(Math.ceil(6.002)); // 印出 7

4 Math.abs(): 所給數字的絕對值

console.log(Math.abs(-5)); // 印出 5

5 Math.sqrt(): 所給數字的開根號

console.log(Math.sqrt(100)); // 印出 10

6 Math.pow(): 所給前面數字乘幾次，是由後面數字給定，會得到最終結果

let base = 2;
let exponent = 3;
let result = Math.pow(base, exponent); // 印出 8

7 Math.random(): 回傳 0~1 之間的隨機小數

console.log(Math.random()); // 隨機印出，例如 0.7400233787300752

8 Math.min() 和 Math.max() : 回傳數字中的最小值和最大值

let minNum = Math.min(2, 4, 1, 7); // 印出 1
let maxNum = Math.max(2, 4, 1, 7); // 印出 7

9 Math.PI : 回傳圓周率 (π)

console.log(Math.PI); // 印出 3.141592653589793

DOM 方法 : 它能夠和網頁進行互動和操作

以下是一些常用的 DOM 方法：

1 getElementById() : 透過元素的 ID 取得對該元素的引用

let element = document.getElementById("myElement");

2 querySelector() 和 querySelectorAll() : 透過 CSS 選擇器選擇元素或一組元素

let singleElement = document.querySelector(".myClass");
let singleElement = document.querySelector("#newClass");
let multipleElements = document.querySelectorAll("p");

3 createElement() : 建立新的 HTML 元素

let newElement = document.createElement("div");

4 appendChild()和 removeChild() : 將一個元素加入到另一個元素中，或從一個元素中移除子元素

let parentElement = document.getElementById("parent");
let childElement = document.getElementById("child");
parentElement.appendChild(childElement);
parentElement.removeChild(childElement);

5 innerHTML: 設定元素的 HTML 內容

let element = document.getElementById("myElement");
let content = element.innerHTML;
element.innerHTML = "<p>New content</p>"; 

6 textContent: 設定元素的文字內容，但不包括 HTML 標籤

let element = document.getElementById("myElement");
let text = element.textContent; 
element.textContent = "New text content"; 

7 getAttribute() 和 setAttribute(): 設定元素的屬性

let element = document.getElementById("myElement");
let value = element.getAttribute("data-id"); 
element.setAttribute("data-id", "new-value"); 

8 classList : 元素的類別名
- add : 添加類別名
- remove : 移除類別名
- toggle : 切換類別名的狀態
- contains : 檢查是否包含類別名

let element = document.getElementById("myElement");
element.classList.add("newClass"); 
element.classList.remove("oldClass"); 
element.classList.toggle("blue"); 
element.classList.contains("myClass"); 

9 addEventListener() : 新增事件監聽器，來執行特定事件

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

10 style : 操作元素的樣式屬性
例如：設定文字顏色和字體大小

let element = document.getElementById("myElement");
element.style.color = "red";
element.style.fontSize = "16px";

而上面這些方法只是 DOM 的一小部分。DOM 還包括許多其他方法和屬性，可用於建立、修改和刪除網頁元素等等，之後會再接續講解

今天就介紹到這邊，那我們明天見囉～～

明天預計內容：JS 的事件處理!!!