那些不常見，但卻非常實用的JS知識點（下） 本篇

二、element（DOM 對象）

1、element 屬性和方法

1.1、clientHeight / clientWidth 屬性

clientHeight:元素內部的高度，包含內邊距，但不包括水平滾動條、邊框和外邊距。

clientWidth:元素內部的寬度，包含內邊距，但不包括垂直滾動條、邊框和外邊距。

此屬性會將獲取的值四捨五入取整數。

document.querySelector("span").clientWidth

clientHeight 和 clientWidth 支持性一致

1.2、scrollHeight / scrollWidth 屬性

類似於上方的 clientHeight / clientWidth，不同在於 clientHeight / clientWidth 在元素設置 overflow 後，不包含隱藏不可見的高度部分。而 scrollHeight / scrollWidth 卻包含隱藏的那部分高度。

我覺得利用這個特性來判斷是否超長，如果 scrollWidth 大於 clientWidth，則表示超長，此時可以對於那些超長後顯示…的元素在浮上去後展示一個自定義的 toolip.

scrollHeight 和 scrollWidth 支持性一致

1.3、getBoundingClientRect()方法

返回元素的大小及其相對於視口的位置(眼睛看得見的文檔區域)。

這個方法超級好用。不管你的元素在什麼位置，它都會計算出來當前元素 相當於 視口的邊緣的位置，和滾動條無關。

返回值為

{
    bottom: xx,  //元素底部離視口頂部的距離
    height: xx,   //元素高度，和元素的clientHeight屬性一致，但比它精確，會保留小數
    left: xx,  //元素左邊離視口左側的距離
    right: xx,  //元素右邊離視口左側的距離
    top: xx,   //元素上部離視口頂部的距離
    width: xx,   //元素寬度，和元素的clientWidth屬性一致，但比它精確，會保留小數
}

這個方法的支持性為 100%， 良心啊，為什麼我才知道這個方法?

1.4、scrollIntoView()方法

如果父元素定義了 overflow，併產生了滾動條，裡面有個子元素，在滾動條滑動後，看不到了。那麼可以讓這個子元素執行這個方法，讓元素滾動到父元素可視區域內。

可以定義滾動條可視區域的頂部，底部，還是左邊，右邊。

也可以定義平滑的滾動過來，還是一瞬間滾動過來。

這個方法的好處是自動計算裡面的元素距離可見區域多少，不需要給數值進行人為干涉，而 scroll()或 scrollTo()方法，必須人為計算滾動條的距離，然後給個數值，才能滾動到某個位置。

首先看個例子，

div1 超過屏幕的區域有個 div2，超過 div2 的區域有個 span1，此時我們可以通過調用 span1 元素的 scrollIntoView 方法，讓 span1，滾動到 div2 的可見區域，也就是向左邊滾動，但是有個壞處，就是 div1 也會向上滾動，直到 div2 能被用戶看到。

而 scroll()或 scrollTo()方法在 span1 滾動到 div2 的可見區域時，div1 不動。不會產生其他附加作用，直到你慢慢滑屏，才會看到 span1，已經停留在 div2 的可視範圍了。

1.5、scroll() / scrollTo() / scrollBy() 方法

scrollTo 方法可以使界面滾動到給定元素的指定坐標位置。

以產生滾動條的那個父元素為基準，

scroll() scrollBy() scrollTo()合稱為 scrollOptions API

2、element 事件

2.1、contextmenu 事件

contextmenu 事件會在用戶嘗試打開上下文菜單時被觸發。該事件通常在滑鼠點擊右鍵或者按下鍵盤上的菜單鍵時被觸

<p id="noContextMenu">這個段落右鍵菜單已被禁用。</p>
noContext = document.getElementById('noContextMenu');
noContext.addEventListener('contextmenu', e => {
  e.preventDefault();
});

單擊右鍵，不會出現標準的右鍵菜單項目

2.2、copy 事件/cut 事件/ paste 事件

dom 的複製/剪切， 粘貼事件。

<div class="source">
  Try copying text from this box...
</div>
<div class="target" contenteditable="true">
  ...and pasting it into this one
</div>
let sourceDom = document.querySelector(".source");
sourceDom.addEventListener("copy", function (e) {
  //將數據存入剪切板
  e.clipboardData.setData("abc", "Hello, world!");
  e.preventDefault();
});
let targetDom = document.querySelector(".target");
targetDom.addEventListener("paste", function (e) {
  //從剪切板取出來
  let data = e.clipboardData.getData("abc");
  //自定義轉化數據
  data = data.toUpperCase();
  //獲取游標位置
  const selection = window.getSelection();
  if (!selection.rangeCount) return false;
  selection.deleteFromDocument();
  //將轉換後的數據插入到游標位置
  selection.getRangeAt(0).insertNode(document.createTextNode(data));
  e.preventDefault();
});

這三個事件支持性一致

2.3、focusin 事件 / focusout 事件

當元素獲得焦點時，focusin 事件被觸發。

focusin 事件和 focus 事件之間的主要區別在於 focus 不會冒泡。

當元素即將失去焦點時，focusout 事件被觸發。

focusout 事件和 blur 事件之間的主要區別在於 blur 不會冒泡。

2.4、onscroll / onwheel

類似於 window 的 onscroll 和 onwheel。只不過綁定對象為 element

let sourceDom = document.querySelector(".source");
sourceDom.addEventListener("scroll", function (e) {
    console.log("111");
});
sourceDom.addEventListener("wheel", function (e) {
    console.log("111");
});

三、document（文檔對象）

1、document 屬性和方法

1.1、characterSet

返回當前文檔的字元編碼，但有相當一部分瀏覽器未實現，可使用原始的 charset 代替

document.characterSet || document.charset

1.2、compatMode

表明當前文檔的渲染模式是怪異模式/混雜模式還是標準模式。

document.compatMode // BackCompat怪異模式， CSS1Compat標準模式

1.3、defaultView

返回當前 document 對象所關聯的 window 對象，如果沒有，會返回 null。

document.defaultView //返回還是window，我為什麼不直接 使用window呢？

上面的代碼很平淡，不足為奇，可是下面的就不一定了

<div class="source" style="height: 200px; overflow: auto;">
    <object type="text/html" style="width: 100%; height: 100%;"> </object>
</div>
let doc = document.querySelector("object").contentDocument; //得到一個document對象
doc.defaultView; //接著得到一個window

得到這個 window 後，有什麼用呢？

我們可以想像一個場景，當我們縮放 window 窗口時，會觸發 window 的 onresize 事件，但是縮放 div，卻不會觸發 onresize 事件，因為 dom 沒有 onresize，那麼如何監聽一個 div 的 resize 呢？

就是上述的方式，在 div 中套一個 object。我不監聽 div，我監聽 div 中的 object，一旦 div 變了，object 不也就變了嗎？

然後通過 object 返回的一個 window 對象，就自然可以綁定 onresize 事件了

document.querySelector("object").contentDocument.defaultView .addEventListener("resize", () => {
    //只要div尺寸變化，object尺寸就變化，resize就能監聽到。不管何種原因導致的尺寸變化。都會監聽到。
});

除此之外，我有一遍專門介紹如何徹底解決 div 尺寸變化問題的文章，有興趣的夥伴可以閱讀

1.4、designMode

控制整個文檔是否可編輯。有效值為 “on” 和 “off” 。

默認值為 “off” 。如果設置為”on”，則好比給 html 所有的元素都添加了 contenteditable 屬性。

1.5、documentElement

會返迴文檔對象（document）的根元素。

可以通過
document.documentElement.clientHeight 來獲取瀏覽器的可用高度，這個高度和 html 或者 body 的 style 上的 height 無關，只與瀏覽器的上方地址欄，下方工具欄等有關，和 window.innerHeight 相等。

2、document 事件

2.1、onscroll / onwheel

類似於 window 的 onscroll 和 onwheel。只不過綁定對象為 document

document.addEventListener("scroll", function (e) {
    console.log("111");
});
document.addEventListener("wheel", function (e) {
    console.log("111");
});