JS的物件(object)與方法

先了解基礎的物件概念：https://www.w3schools.com/js/js_objects.asp

而JS物件又可以分為兩種類型

JS的物件類型

1. 內建物件（預設物件）

這些物件是由 JavaScript 引擎或瀏覽器提供的，並且它們提供了各種基本功能。內建物件可以進一步分為幾個類別：

全局物件：
- Object：所有物件的基礎。
- Function：用於創建函數。
- Math：提供數學計算功能（例如，Math.max(), Math.sqrt()）。
- Date：用於處理日期和時間。
- JSON：用於處理 JSON 格式的數據（例如，JSON.parse() 和 JSON.stringify()）。
DOM 物件：
- document：表示整個 HTML 文檔，允許訪問和操作網頁內容。
- window：表示瀏覽器窗口或框架，包含有關瀏覽器的資訊和功能。
- navigator：提供有關使用者瀏覽器的資訊。
- location：用於讀取和修改瀏覽器的 URL。
標準物件：
- Array：用於處理數組。
- String：用於處理字符串。
- Number：用於處理數字。
- RegExp：用於處理正則表達式。

2. 使用者自訂物件

這些物件是由使用者在代碼中創建的，用來儲存和操作自定義數據。這類物件可以包含任何屬性和方法，滿足特定的需求。

範例：創建使用者自訂物件

// 定義一個使用者自訂物件
var car = {
    make: 'Toyota',
    model: 'Camry',
    year: 2021,
    startEngine: function() {
        console.log('Engine started');
    }
};

// 訪問物件的屬性
console.log(car.make); // 輸出: Toyota

// 調用物件的方法
car.startEngine(); // 輸出: Engine started

Document 物件

而document 是 DOM 的核心物件，代表整個 HTML 文檔。它提供了許多屬性和方法來操作網頁的內容和結構。

常用屬性和方法

屬性/方法	描述
`document.getElementById()`	根據元素的 `id` 獲取元素。
`document.getElementsByClassName()`	根據元素的 `class` 名稱獲取元素。
`document.getElementsByTagName()`	根據元素的標籤名獲取元素。
`document.querySelector()`	根據 CSS 選擇器獲取第一個匹配的元素。
`document.querySelectorAll()`	根據 CSS 選擇器獲取所有匹配的元素。
`document.createElement()`	創建新的 HTML 元素。
`document.createTextNode()`	創建新的文本節點。
`document.appendChild()`	將一個節點添加到父節點的最後一個子節點。
`document.removeChild()`	從父節點中移除一個子節點。
`document.body`	取得 `body` 元素。
`document.title`	獲取或設置網頁的標題。
`document.URL`	取得當前網頁的 URL。
`document.cookie`	獲取或設置網頁的 cookie。

使用範例

// 獲取元素並修改內容
let element = document.getElementById('myElement');
element.textContent = 'Hello, World!';

// 創建新元素並添加到 body
let newDiv = document.createElement('div');
newDiv.textContent = '這是新創建的元素';
document.body.appendChild(newDiv);

補充：WINDOW物件

在 JavaScript 中，window 物件是所有瀏覽器環境中的全局物件，表示瀏覽器的視窗。每個開啟的瀏覽器窗口或標籤頁都會自動創建一個 window 物件，這個物件包含了很多屬性和方法，可以用來操作瀏覽器窗口、控制視窗的顯示、處理事件等。