js基礎-數組-事件對象-日期-本地存儲

一、大綱

一、獲取元素位置

在JavaScript中，獲取一個元素在頁面上的位置可以通過多種方法實現。以下是一些常見的方法：

getBoundingClientRect()

getBoundingClientRect() 方法返回元素的大小及其相對于視口的位置。它提供了元素的left、top、right和bottom屬性，這些屬性表示元素在視口中的位置。
var rect = document.getElementById('myElement').getBoundingClientRect(); console.log(rect.left, rect.top); // 元素相對于視口左上角的坐標
elementFromPoint(x, y)

elementFromPoint(x, y) 方法返回位于頁面上給定坐標(x, y)的元素。這個方法屬于document對象，因此可以直接在document上調用。
var element = document.elementFromPoint(x, y); console.log(element); // 返回位于(x, y)坐標的元素
offsetTop 和 offsetLeft

offsetTop 和 offsetLeft 屬性返回元素的頂部和左側邊緣相對于其最近的定位的祖先元素的偏移。
var element = document.getElementById('myElement'); console.log(element.offsetTop, element.offsetLeft); // 元素相對于其定位的祖先元素的偏移
getComputedStyle()

getComputedStyle() 方法返回一個對象，該對象包含元素的所有當前計算后的樣式屬性的值，包括position、top、left等。
var style = window.getComputedStyle(document.getElementById('myElement')); console.log(style.position, style.top, style.left); // 獲取元素的計算后樣式
position 屬性

position 屬性可以告訴你元素的定位方式（如static、relative、absolute、fixed或sticky），這有助于你了解元素的位置是如何確定的。
復制
var element = document.getElementById('myElement'); console.log(element.style.position); // 獲取元素的定位方式

二、日期

1.newDate()

2.顯示格式

3.時間戳

推薦+

案例：

在編程和計算機科學中，時間戳是一個表示特定時刻的數字。在不同的上下文中，時間戳可以有不同的含義和格式，以下是一些常見的時間戳概念：

Unix 時間戳:
- 這是最常見的時間戳格式，表示從1970年1月1日UTC（協調世界時）開始的秒數（不包括閏秒）。在JavaScript中，可以通過Date.now()函數獲取當前的Unix時間戳。
var timestamp = Date.now(); // 獲取當前的Unix時間戳（毫秒）

如果需要秒為單位的Unix時間戳，可以使用Date對象的getTime()方法或Date.UTC()方法。
var timestampInSeconds = Math.floor(Date.now() / 1000); var timestampInSeconds = new Date().getTime() / 1000; var timestampInSeconds = Date.UTC(year, month, day, hour, minute, second);
ISO 8601 時間戳:
- 這是一種使用日期和時間的國際標準表示法，格式通常為YYYY-MM-DDTHH:mm:ss.sssZ，其中T是一個分隔符，Z表示UTC時區（或用+hh:mm和-hh:mm表示時區偏移）。
var timestamp = new Date().toISOString(); // 轉換為ISO格式的時間字符串
性能時間戳 (Performance Timestamp):
- 在Web開發中，performance.now()可以提供比Date.now()更高精度的時間戳，通常用于測量性能。
var performanceTimestamp = performance.now(); // 獲取高精度時間戳
時間戳轉換:
- 可以將Unix時間戳轉換為更易讀的日期格式，反之亦然。
var date = new Date(timestamp); // 將Unix時間戳轉換為Date對象 var timestamp = date.getTime(); // 將Date對象轉換為Unix時間戳
時間戳的用途:
- 時間戳常用于記錄事件發生的時間點，如服務器日志、數據庫記錄、用戶操作時間等。
- 在分布式系統中，時間戳用于同步事件順序和解決沖突。
- 在性能分析中，時間戳用于測量代碼執行時間。
時間戳的存儲:
- 時間戳通常以整數或浮點數存儲，取決于所需的時間精度。
時間戳的時區問題:
- 時間戳通常表示為UTC時間，但在實際應用中，需要考慮時區轉換。

在JavaScript中，處理時間戳時，需要注意時區和精度問題，以確保正確地表示和處理時間。

三、dom節點（dom樹）

DOM（文檔對象模型，Document Object Model）是HTML和XML文檔的編程接口。它將網頁結構化為一個由節點和對象（如元素、屬性和文本）組成的樹狀結構，允許開發人員以編程方式訪問和操作網頁內容。

在DOM樹中，每個節點（node）代表文檔中的一個對象或結構，以下是一些常見的節點類型：

元素節點（Element node）:
- 代表HTML中的一個元素，如<div>、<p>、<a>等。
屬性節點（Attribute node）:
- 代表元素的一個屬性，如class="example"或id="myId"。
文本節點（Text node）:
- 包含元素或屬性的文本內容，如<p>這是一個文本節點。</p>中的“這是一個文本節點。”
注釋節點（Comment node）:
- 包含文檔的注釋，它們在瀏覽器中不顯示，但可以在HTML源代碼中看到。
文檔類型節點（DocumentType node）:
- 代表文檔類型聲明，如<!DOCTYPE html>。
文檔節點（Document node）:
- 代表整個文檔，是DOM樹的根節點。
文檔片段節點（DocumentFragment node）:
- 一個輕量級的DOM節點，用作DOM樹的臨時容器，常用于批量操作。
CDATA節節點（CDATASection node）:
- 包含不應由XML解析器解析的文本。

在JavaScript中，可以使用DOM API來創建、修改、刪除和查詢DOM節點。以下是一些基本的DOM操作：

創建節點:var newNode = document.createElement('div');
添加節點:parentElement.appendChild(newNode);
刪除節點:parentElement.removeChild(oldNode);
替換節點:parentElement.replaceChild(newNode, oldNode);
查詢節點:var element = document.getElementById('myId');
修改內容:element.textContent = '新內容';
element.innerHTML = '<div>新HTML內容</div>';
獲取屬性:var attributeValue = element.getAttribute('class');
設置屬性:element.setAttribute('class', 'newValue');
監聽事件:element.addEventListener('click', function() {console.log('元素被點擊了');
});

M端事件（移動端）

四、location當前瀏覽上下文的一些信息

在JavaScript中，location 對象是一個內置對象，它提供了當前瀏覽上下文的一些信息，以及一些用于導航到不同的文檔的方法。location 對象是 Window 對象的一部分，因此通常在瀏覽器環境中可以直接使用它。

以下是一些常用的 location 對象屬性和方法：

location.href:表示當前頁面的URL。可以讀取這個屬性來獲取當前頁面的地址，也可以賦值一個新的URL來導航到另一個頁面。
console.log(location.href); // 打印當前頁面的URL
location.href = 'https://www.example.com'; // 重定向到新的URL
location.search:表示URL中的查詢字符串部分，即?后面的部分。
console.log(location.search); // 打印查詢字符串
location.pathname:表示URL中的路徑部分。
console.log(location.pathname); // 打印URL路徑
location.hash:表示URL中的哈希部分，即#后面的部分。
console.log(location.hash); // 打印URL哈希
location.assign():加載一個新的文檔。
location.assign('https://www.example.com'); // 導航到指定的URL
location.replace():用另一個文檔替換當前的資源。與 assign() 不同的是，使用 replace() 后，新頁面不會添加到瀏覽器的歷史記錄中。
location.replace('https://www.example.com'); // 替換當前頁面
location.reload():重新加載當前頁面。默認情況下，它會從服務器重新加載頁面，但也可以提供一個參數來控制是否要從緩存中加載。
location.reload(); // 從服務器重新加載當前頁面
location.reload(true); // 強制從服務器加載
location.toString():返回整個URL的字符串表示。
console.log(location.toString()); // 打印完整的URL
location.ancestorOrigins:只讀屬性，返回一個包含當前頁面所有祖先頁面源點（origins）的數組。
console.log(location.ancestorOrigins); // 打印當前頁面的祖先源點
通過使用 location 對象，你可以在JavaScript中實現頁面跳轉、獲取當前頁面的URL信息等操作。這些操作對于動態Web應用的開發非常重要。

1.跳轉頁面

2.路由基礎（地址欄變化）

3.刷新界面?

五、navigator

navigator 是 Web 瀏覽器提供的 JavaScript 對象，它用于解決以下問題：

用戶代理檢測：
- 通過?navigator.userAgent?獲取用戶代理字符串，可以檢測訪問網頁的瀏覽器類型、版本以及操作系統信息。
客戶端能力檢測：
- 了解客戶端（瀏覽器）的能力，如是否支持 cookies（navigator.cookieEnabled）、是否處于在線狀態（navigator.onLine）、支持的觸摸點數（navigator.maxTouchPoints）等。
地理位置定位：
- 使用?navigator.geolocation?對象獲取用戶的地理位置信息，這在需要提供地理位置相關服務時非常有用，如地圖服務、本地搜索等。
網絡狀態監測：
- 通過?navigator.onLine?屬性監測用戶的網絡連接狀態，這對于提供離線體驗或網絡狀態提示很有幫助。
瀏覽器特性檢測：
- 檢測瀏覽器是否支持某些特定的特性或 API，如 WebRTC、Service Workers、WebGL 等。
國際化和本地化：
- 獲取用戶的語言偏好（navigator.language），以便提供本地化的網頁內容。
跨源通信：
- 使用注冊協議處理程序（navigator.registerProtocolHandler()）實現跨源或跨應用的通信。
性能優化：
- 通過?navigator.sendBeacon()?方法在頁面卸載時發送小體積的異步數據，減少對用戶離開頁面時的影響。
安全性和隱私：
- 了解瀏覽器的安全特性，如是否支持 HTTPS 或其他安全協議。
用戶個性化體驗：
- 根據用戶代理數據（navigator.userAgentData）提供定制化的用戶體驗或提示用戶升級瀏覽器。

navigator 對象為開發者提供了豐富的信息，使得開發者能夠根據客戶端的特性和能力來優化網頁的功能和性能，提供更好的用戶界面和交互體驗。然而，使用 navigator 對象時也需要考慮隱私和安全問題，避免不當使用用戶信息。

在實際開發中，一般會結合其他特性檢測方法，如特性檢測（feature detection）、能力檢測（capability detection），以及避免過度依賴用戶代理字符串，因為用戶代理字符串可以被偽造，且僅依賴它進行檢測可能導致誤判。

在Web開發中，navigator 是 JavaScript 的一個全局對象，它提供了關于瀏覽器的信息，包括用戶代理字符串（user agent string）、瀏覽器和操作系統的語言、以及瀏覽器插件等信息。navigator 對象是 Window 對象的一部分，因此可以直接在瀏覽器環境中訪問。

以下是一些 navigator 對象的常用屬性和方法：

以下是一些 navigator 對象的常用屬性和方法：navigator.userAgent:返回一個包含瀏覽器名稱和版本信息的字符串。
console.log(navigator.userAgent);
navigator.platform:返回用戶的操作系統的字符串表示。
console.log(navigator.platform);
navigator.language 或 navigator.languages:返回用戶偏好的語言代碼。
console.log(navigator.language); // 例如: "en-US"
console.log(navigator.languages); // 返回一個包含用戶偏好語言的數組
navigator.onLine:返回一個布爾值，指示客戶端是否連接到互聯網。
console.log(navigator.onLine); // true 或 false
navigator.cookieEnabled:返回一個布爾值，指示瀏覽器是否啟用了 cookies。
console.log(navigator.cookieEnabled); // true 或 false
navigator.maxTouchPoints:返回一個整數，表示設備支持的最大觸摸點數。
console.log(navigator.maxTouchPoints);
navigator.geolocation:提供了訪問用戶設備地理位置信息的接口。
navigator.geolocation.getCurrentPosition(function(position) {console.log(position.coords.latitude, position.coords.longitude);},function(error) {console.error(error);}
);
navigator.userAgentData:提供了訪問用戶代理的品牌、版本以及其它相關信息的接口。
console.log(navigator.userAgentData.brands); // 返回瀏覽器品牌的數組
console.log(navigator.userAgentData.mobile); // 檢查是否為移動設備
navigator.serviceWorker:提供了與瀏覽器中的 Service Workers 交互的接口。
if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/service-worker.js');
}
navigator.registerProtocolHandler():允許網站注冊自定義協議處理程序。
navigator.sendBeacon():允許在頁面卸載時異步傳輸小數據。

使用 navigator 對象時，需要注意隱私和安全問題，因為某些屬性可能會泄露用戶的敏感信息。例如，userAgent 字符串可以被用來識別用戶使用的瀏覽器和操作系統，這可能會被用于不正當的跟蹤或瀏覽器指紋識別。

此外，由于 navigator 對象包含很多屬性和方法，不同的瀏覽器和操作系統可能會有不同的實現，因此在跨瀏覽器兼容性方面需要特別注意。

注意：立即執行函數寫法！

六、histroy(前進后退)

七、本地存儲

瀏覽器本地存儲是Web應用程序中用于存儲數據的一種機制，允許數據保留在用戶的設備上，而不是在服務器上。這有助于提高性能、減少服務器負載，并可以改善用戶在離線狀態下的體驗。以下是一些常見的瀏覽器本地存儲技術：

Cookie:
- 最早的瀏覽器存儲技術之一。Cookie 很小（一般不超過4KB），并且會在每次請求時被發送到服務器，適合存儲會話信息或個人偏好設置。
Web Storage (localStorage 和 sessionStorage):
- 提供了超過Cookie的存儲容量，localStorage 沒有大小限制，但大多數瀏覽器限制在大約5MB左右。localStorage 用于長期存儲整個網站的數據，而 sessionStorage 為單個會話提供數據存儲，當用戶關閉瀏覽器標簽或窗口時，數據會被清除
IndexedDB:是一種低等級的API用于客戶端的存儲，可以存儲大量數據，包括字符串、文件、圖片等。IndexedDB 提供了比 Web Storage 更復雜的數據存儲能力，支持事務、鍵值對索引以及更復雜的查詢。

localStorage 示例：localStorage.setItem('username', 'JohnDoe');
var username = localStorage.getItem('username');
localStorage.removeItem('username');
sessionStorage 示例：sessionStorage.setItem('viewState', 'someValue');
var viewState = sessionStorage.getItem('viewState');
sessionStorage.removeItem('viewState');

1.localStorage

注意：只能存字符串

復雜類型存儲

轉回來

// 存儲對象
var obj = { name: "John", age: 30 };
localStorage.setItem('user', JSON.stringify(obj));// 讀取對象
var userStr = localStorage.getItem('user');
var userObj = JSON.parse(userStr);