JS小知識，分享五個不常用但又很重要的原生API
getBoundingClientRect()
getBoundingClientRect()是JavaScript中的一個函數，它返回一個 DOMRect 矩形對象，該對象表示元素在視口中的位置。這個矩形對象包含了元素的左，上，右和下邊界，以及寬度和高度。
domRect = element.getBoundingClientRect();
注意：getBoundingClientRect()是基于視口的，所以坐標是相對于當前視口的。一些瀏覽器的實現會四舍五入返回的數值，如果精確度要求高可以使用Math.round()解決。
例如，獲取DOM元素相對于頁面左上角的top和left定位距離的值。
const h3 = document.querySelector("h3");
const rect = h3.getBoundingClientRect();
const topElement = document.documentElement;
const positionTop = topElement.scrollTop + rect.top;
const positionLeft = topElement.scrollLeft + rect.left;window.getComputedStyle()
window.getComputedStyle()是JavaScript中的一個函數，它可以獲取一個元素的計算后的樣式。返回的是一個CSSStyleDeclaration對象，可以使用它來讀取元素的樣式信息。
document.defaultView.getComputedStyle(element, [pseudo-element])
//或
window.getComputedStyle(element, [pseudo-element])它有兩個參數，第一個是計算樣式的元素，第二個是偽元素；如果偽元素不存在，則傳遞 null。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#root {
background-color: pink;
width: 100px;
height: 200px;
}
#root::after {
content: 'Haskell';
display: table;
clear: both;
}
</style>
</head>
<body>
<div id="root" style="background-color: rgb(135, 206, 235);"></div>
</body>
<script>
function getStyleByAttr(node, name) {
return window.getComputedStyle(node, null)[name]
}
const node = document.getElementById('root')
// rgb(135, 206, 235)
console.log(getStyleByAttr(node, 'backgroundColor'))
// 100px
console.log(getStyleByAttr(node, 'width'))
// 200px
console.log(getStyleByAttr(node, 'height'))
// table
console.log(window.getComputedStyle(node, '::after').display)
// Haskell
console.log(window.getComputedStyle(node, '::after').content)
</script>
</html>once: true
once: true 不是 API，看起來也不像。用于屬性配置，有了它，lodash的once就不用了。
"once: true" 是一種 JavaScript 中的事件監(jiān)聽器選項。
當在元素上綁定事件監(jiān)聽器時，可以為其傳遞一些配置選項。其中之一就是 "once: true"，它表示這個事件監(jiān)聽器只會觸發(fā)一次，之后就會被自動移除。
這種方式可以避免在后續(xù)操作中重復觸發(fā)已經不需要的事件監(jiān)聽器。
舉個例子：
const button = document.querySelector('button');
button.addEventListener('click', handleClick, { once: true });
function handleClick(event) {
console.log('Button was clicked.');
}第一次點擊按鈕時，會在控制臺中打印 "Button was clicked."，之后再點擊按鈕將不會有任何反應。
這個特性是在 DOM4 規(guī)范中引入的，并在現代瀏覽器中被廣泛支持。
注意：在使用這種方式時，需要注意的是，一旦事件監(jiān)聽器被移除，就不能再次觸發(fā)。如果需要多次觸發(fā)，就需要重新綁定事件監(jiān)聽器。
getModifierState()
JavaScript 中的 getModifierState() 方法可用于檢查特定的修飾鍵（如 Alt、Ctrl、CapsLock 或 Shift）是否當前被按下。它是 Event 對象的一個方法。
示例代碼：
<input type="text" size="40" onkeydown="myFunction(event)">
<p id="demo"></p>
<script>
function myFunction(event) {
var x = event.getModifierState("CapsLock");
document.getElementById("demo").innerHTML = "Caps Lock: " + x;
}
</script>clipboard.readText()
剪貼板，我敢肯定，是一個常用的功能。
要從剪貼板中讀取文本，請調用navigator.clipboard.readText() 并等待返回的 Promise 進行解析。
async function getClipboardContents() {
try {
const text = await navigator.clipboard.readText();
console.log('Pasted content: ', text);
} catch (err) {
console.error('Failed to read clipboard contents: ', err);
}
}要將文本復制到剪貼板，只需調用 writeText()。
async function copyPageUrl() {
try {
await navigator.clipboard.writeText(location.href);
console.log('Page URL copied to clipboard');
} catch (err) {
console.error('Failed to copy: ', err);
}
}結束語
今天的分享就到這里，希望對你有所幫助。
