8 個你不知道的 DOM 功能[每日前端夜話0x79]

8 個你不知道的 DOM 功能[每日前端夜話0x79]

瘋狂的技術宅 前端先鋒

每日前端夜話0x79
每日前端夜話，陪你聊前端。
每天晚上18:00準時推送。
正文共：4740 字
預計閱讀時間： 16 分鐘
翻譯：瘋狂的技術宅
來源：logrocket

最近關注了太多的工具，現在最好從所有 React 和 npm-install-everything 的文章中休息一下，來看看一些純粹的 DOM 和 Web API 功能，它們可以在不依賴任何第三方庫的前提下在現代瀏覽器中運行。

這篇文章將講解八個鮮爲人知的 DOM 功能，這些功能具有強大的瀏覽器支持。爲了幫助你理解每個功能的工作原理，我將通過大量的測試代碼爲你自己提供演示，這些代碼都放在了CodePen上。

由於微信公衆號不能引用並顯示CodePen上的效果，請大家點擊文末的查看原文或者複製鏈接並粘貼到瀏覽器【http://blog.yidengxuetang.com/post/201905/30/】，到我的博客上查看效果。另外查看原文之前順便點一下“在看” ^_^

學習這些方法和屬性沒有陡峭的學習曲線，並且可以與項目中所使用的任何工具集在一起使用。

addEventListener() 的新參數 options

---

你肯定用 addEventListener() 處理過將事件附加到 Web 文檔中的元素。通常 addEventListener() 調用看起來像這樣：

1element.addEventListener('click', doSomething, false);

第一個參數是正在監聽的事件。第二個參數是一個回調函數，它將在事件發生時執行。第三個參數是一個名爲 useCapture 的布爾值，用於指示是否要使用事件冒泡或捕獲【https://www.sitepoint.com/event-bubbling-javascript/】。

這些大家都知道（特別是前兩個）。但也許你不知道 addEventListener() 也接受一個替換最終布爾值的參數。這個新參數是一個 options 對象，如下所示：

1element.addEventListener('click', doSomething, {
2  capture: false,
3  once: true,
4  passive: false
5});

請注意，該語法允許定義三個不同的屬性。以下是每個含義的快速概述：

• capture  — 與之前提到的 useCapture 參數相同的布爾值【https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters】
• once  — 布爾值，如果設置爲 true，則表示該事件應僅在目標元素上運行一次，然後被刪除
• passive  — 一個最終的布爾值，如果設置爲 true，表示該函數永遠不會調用 preventDefault()，即使它被包含在函數體中
  其中最有趣的是 once 選項。這肯定會在很多情況下派上用場，並且無需用 removeEventListener() 或使用其他一些複雜的技術來強制單個事件觸發器。如果你用過 jQuery，可能熟悉該庫中的類似功能：.one() 方法。
  

你可以試着運行以下 CodePen 項目中關於 options 對象的一些代碼：

CodePen演示：https://codepen.io/impressivewebs/pen/GeJZYz/

請注意，演示頁面上的按鈕只會附加一次文本。如果將 once 值改爲 false，則多次單擊該按鈕，每次單擊按鈕時都會附加文本。

瀏覽器對 options 對象的支持非常好：所有瀏覽器都支持它，除了 IE11 及更早版本【https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Browser_compatibility】，因此如果你不考慮微軟 Edge 之前的瀏覽器，那麼使用起來還是非常安全的。

scrollTo() 方法用於在窗口或元素中平滑滾動

---

平滑滾動總是經常被用到的。當點擊本地頁面鏈接並立即跳轉到指定位置時（如果你眨眼，甚至可能會錯過跳轉過程），這會顯得很突兀。平滑滾動改進了頁面的用戶體驗。

雖然過去用 jQuery 插件就足以完成了，但現在用 window.scrollTo() 方法只需要一行 JavaScript。

scrollTo() 方法作用於 Window 對象，告訴瀏覽器滾動到頁面上的指定位置。這是一個最簡單語法的例子：

1window.scrollTo(0, 1000);

這將向右滾動窗口 0px （表示x座標或水平滾動）並向下滾動 1000px （垂直滾動，這通常是你想要的）。但這樣做的話滾動並不是一個平滑的動畫效果，頁面將會突然滾動。

有時確實是你想要的。但是爲了能夠平滑滾動，你必須加入鮮爲人知的 ScrollToOptions 對象，如下所示：

1window.scrollTo({
2  top: 0,
3  left: 1000,
4  behavior: 'smooth'
5});

這段代碼與前面的例子相同，但在 options 對象中添加了 behavior 屬性的smooth值。

請看下面這個 CodePen 演示，允許你自定義滾動量和行爲：

CodePen演示：https://codepen.io/impressivewebs/pen/pGYXgj

嘗試在框中輸入一個數字（最好是一個比較大的數字，比如4000）並更改 behavior 選擇框以使用 smooth 或 auto（這是 behavior 屬性僅有的兩個選項）。

關於此功能的一些說明：

• 對於 scrollTo() 的基本支持是全面的，但並非所有瀏覽器【https://caniuse.com/#feat=element-scroll-methods】都支持 options 對象

• 此方法在應用於元素時也可以使用

• 這些選項也同樣適用於 scroll() 和 scrollBy() 方法

setTimeout() 和帶有可選參數的 setInterval()

---

在更多情況下，使用 window.setTimeout() 和 window.setInterval() 實現基於時序的動畫的方案已經被性能更好的 window.requestAnimationFrame() 所取代。但是有些情況下使用 setTimeout() 或 setInterval() 是正確的選擇，因此瞭解這些方法的一個鮮爲人知的特性是很好的。

通常你總會看到這些方法被使用，語法如下：

let timer = window.setInterval(doSomething, 3000);
function doSomething () {
  // Something happens here…
}

這裏的 setInterval() 傳遞兩個參數：回調函數和時間間隔。如果使用 setTimeout() 將只運行一次，而在當前這種情況下，它會無限期地運行，直到我在傳入 timer 變量時調用 window.clearTimeout()。

這很簡單。但是如果我希望回調函數能夠接受參數呢？可以這樣做：

let timer = window.setInterval(doSomething, 3000, 10, 20);
function doSomething (a, b) {
  // Something happens here…
}

注意我在 setInterval() 調用中添加了兩個參數。然後我的 doSomething() 函數接受了這些參數，並可以根據需要操作它們。

這是一個 CodePen 演示，演示瞭如何使用 setTimeout()：

CodePen：https://codepen.io/impressivewebs/pen/PgoNEj

單擊該按鈕時，將會使用傳入的兩個值進行計算。可以通過修改代碼中的數字更改值。

至於瀏覽器支持，似乎在兼容性上有些小問題，不過看上去現在幾乎所有還在使用中的瀏覽器都支持可選參數功能，包括 IE10。

單選按鈕和複選框的 defaultChecked 屬性

---

你可能知道，對於單選按鈕和複選框，可以直接通過 checked 屬性去獲取或設置它，如下所示（假設 radioButton 是對特定表單輸入的引用）：

1console.log(radioButton.checked); // true
2radioButton.checked = false;
3console.log(radioButton.checked); // false

但是還有一個名爲 defaultChecked 的屬性，它可以應用於單選按鈕組或複選框組，用來找出組中哪一個最初被設置爲了 checked。

這是一些HTML示例：

1<form id="form">
2  <input type="radio" value="one" name="setOne"> One
3  <input type="radio" value="two" name="setOne" checked> Two<br />
4  <input type="radio" value="three" name="setOne"> Three
5</form>

有了這個屬性，即使在更改了被選中的單選按鈕之後，也可以通過遍歷找出最初哪一個是默認值，如下所示：

1for (i of myForm.setOne) {
2  if (i.defaultChecked === true) {
3    console.log(‘i.value’);
4  }
5}

下面是CodePen演示，它將顯示當前選中的單選按鈕或默認選中的單選按鈕，具體取決於你所使用的按鈕：

CodePen：https://codepen.io/impressivewebs/pen/qwWoOr

該示例中的 defaultChecked 選項將始終爲 “Two” 單選按鈕。如上所述，這也可以用於複選框組。你可以試着修改 HTML 中的默認選中選項，然後再次點擊按鈕看看效果。

下面是一個複選框組的演示：

CodePen：https://codepen.io/impressivewebs/pen/wZMJYQ

在這種情況下，你會注意到默認情況下應該會檢查兩個複選框，因此當使用 defaultChecked 查詢時，這兩個複選框都會返回 true。

使用 normalize() 和 wholeText 操作文本節點

---

HTML 文檔中的文本節點可能會很複雜，尤其是當動態插入或創建節點時。例如假設有以下 HTML：

1<p id="el">This is the initial text.</p>
2

然後我可以在該段落元素中添加一個文本節點：

1let el = document.getElementById('el');
2el.appendChild(document.createTextNode(' Some more text.'));
3console.log(el.childNodes.length); // 2

請注意，在附加的文本節點之後的註釋中，我記錄了段落內子節點的長度，並且它表示有兩個節點。這些節點是一個文本字符串，但由於文本是動態附加的，因此它們應該被視爲單獨的節點。

在某些情況下，如果將文本視爲單個文本節點會更有幫助，這使文本更容易操作。這就是 normalize()和wholeText()的用武之地。

normalize() 方法可用於合併單獨的文本節點：

1el.normalize();
2console.log(el.childNodes.length); // 1

在元素上調用 normalize() 將會合並該元素內的任何相鄰的文本節點。如果恰好在相鄰的文本節點之間散佈着一些 HTML，那麼 HTML 將保持原樣，而所有相鄰的文本節點將被合併。

但是，如果由於某種原因我想使文本節點分開，但我仍然希望能夠將文本作爲一個單元抓取，那麼 wholeText 就是有用的。因此我可以在相鄰的文本節點上執行此操作，而不是調用 normalize()。

1console.log(el.childNodes[0].wholeText);
2// This is the initial text. Some more text.
3console.log(el.childNodes.length); // 2

只要我沒有調用 normalize()，文本節點的長度將保持爲 2，我可以用 wholeText 記錄整個文本。但需要注意以下幾點：

• 我必須在其中一個文本節點上調用 wholeText，而不是元素（因此代碼中的el.childNodes [0]、el.childNodes[1]也可以正常工作）
• 文本節點必須相鄰，中間不能有其他 HTML 分隔它們
  你可以看到這兩個功能以及 splitText() 方法已經用在了這個 CodePen 演示中【https://codepen.io/impressivewebs/pen/ZZzrBV?editors=0011】。打開 CodePen 控制檯或瀏覽器的開發人員工具控制檯可以查看生成的日誌。
  

insertAdjacentElement() 和 insertAdjacentText()

---

很多人可能很熟悉 insertAdjacentHTML() 方法，它允許你輕鬆地將一串文本或 HTML 添加到頁面中與其他元素相關的特定位置。

但也許你不知道的是，還有另外兩個以類似方式工作的方法：insertAdjacentElement() 和 insertAdjacentText()。

insertAdjacentHTML() 的一個缺點是插入的內容必須是字符串的形式。因此如果要包含 HTML，則必須將其聲明爲：

1el.insertAdjacentHTML('beforebegin', '<p><b>Some example</b> text goes here.</p>');

但是 insertAdjacentElement() 的第二個參數可以是元素引用：

1let el = document.getElementById('example'),
2addEl = document.getElementById('other');
3el.insertAdjacentElement('beforebegin', addEl);

這個方法的有趣之處在於，它不僅會將引用的元素添加到指定的位置，而且還會將元素從文檔中的原始位置移除。這是一種在 DOM 中移動元素的簡單方法。

這是使用 insertAdjacentElement()的 CodePen 演示。點擊按鈕可以有效地“移動”目標元素：

CodePen：https://codepen.io/impressivewebs/pen/MRjOpj

insertAdjacentText()方法的工作方式類似，但提供的文本字符串將僅作爲文本插入，即使它包含HTML。請注意以下演示：

CodePen：https://codepen.io/impressivewebs/pen/MRymba

你可以將自己的文本添加到輸入字段，然後使用該按鈕將其添加到文檔中。注意：任何特殊字符（如HTML標記）都將會作爲 HTML 實體插入，請區分此方法與 insertAdjacentHTML() 行爲的區別。

所有三種方法（insertAdjacentHTML()，insertAdjacentElement()和insertAdjacentText() ）的第一個參數所使用的值的規則是相同的：

• beforebegin：在調用方法的元素之前插入
• afterbegin：在第一個子節點之前插入元素內部
• beforeend：在最後一個子節點之後插入元素內部
• afterend：插入到元素後面

  event.detail 屬性

如前所述，我們可以用熟悉的 addEventListener()方法將事件附加到網頁上的元素。例如：

1btn.addEventListener('click', function () {
2  // do something here...
3}, false);

使用addEventListener()時，你可能想要阻止函數調用中的默認瀏覽器行爲。例如，你可能希望攔截 <a> 元素的點擊並使用 JavaScript 來處理，你會這樣做：

1btn.addEventListener('click', function (e) {
2  // do something here...
3  e.preventDefault();
4}, false);

這裏使用了 preventDefault()，這等價於老式的 return false 語句。這需要你將 event 對象傳遞給函數，因爲在該對象上調用了 preventDefault()方法。

但是你可以用 event 對象做更多事情。事實上當使用某些事件時（例如click，dbclick，mouseup，mousedown），這些事件會暴露一些叫做 UIEvent 接口的東西。正如 MDN 所指出的，該接口上的許多功能已被棄用或沒有標準化。但最有趣並且最有用的是 detail 屬性，它是官方規範的一部分。

以下是它在同一個事件監聽器示例中的代碼：

1btn.addEventListener('click', function (e) {
2  // do something here...
3  console.log(e.detail);
4}, false);

我已經設置了一個 CodePen 演示，演示了使用許多不同事件的結果：

CodePen：https://codepen.io/impressivewebs/pen/QoZoQe

演示中的每個按鈕都將按照按鈕文本描述的方式進行響應，並顯示一條顯示當前點擊次數的消息。需要注意的是：

• WebKit 瀏覽器允許無限制的點擊次數，除了 dblclick，它總是兩次點擊。 Firefox 只允許最多三次點擊，然後計數再次開始
• 我已經包通過包含 blur 和 focus 來證明這些不符合條件並且總是返回0（即沒有點擊）
• 在 IE11 等舊版瀏覽器中的行爲嚴重不一致
  請注意，在演示中包含了一個很好的用例——模仿三擊事件：
  

1btnT.addEventListener('click', function (e) {
2  if (e.detail === 3) {
3    trpl.value = 'Triple Click Successful!';
4  }
5}, false);

如果所有瀏覽器都計算過三次點擊次數，那麼你還可以檢測到更高的點擊次數，但我認爲在大多數情況下，三次點擊事件就足夠了。

scrollHeight 和 scrollWidth 屬性

---

scrollHeight 和 scrollWidth 屬性可能聽起來很熟悉，因爲你可能會將它們與其他與寬度和高度相關的 DOM 功能混淆。例如，offsetWidth 和 offsetHeight 屬性將返回元素的高度和寬度，而不會考慮溢出。

請注意以下演示：

CodePen：https://codepen.io/impressivewebs/pen/WWxEpX

演示中的列具有相同的內容。左邊列的 overflow 被設置爲 auto，而右邊列的 overflow 被設置爲 hidden。 offsetHeight 屬性返回相同的值，因爲它不考慮可滾動區域或隱藏區域，它只測量元素的實際高度，包括垂直填充和邊框。

另一方面，命名恰當的 scrollHeight 屬性將會計算元素的完整高度，包括可滾動（或隱藏）區域：

CodePen：https://codepen.io/impressivewebs/pen/EJyvoB

上面的演示與前一個相同，只不過它用了 scrollHeight 來獲取每列的高度。再次注意，兩列的值相同。但這次它的值要打得多，因爲溢出區域也算作高度的一部分。

上面的示例主要關注元素高度，這是最常見的用例，但你也可以用 offsetWidth 和 scrollWidth，它們以相同的方式應用於水平滾動。

總結

---

這就是你不知道的 DOM 功能列表，這些可能是我在近幾年遇到的一些最有趣的功能，所以我希望在不遠的將來你能把它們用在自己的項目中。

如果你之前用過其中的某些功能，或是如果你能想到其中某個功能的有趣的用例，請在評論中告訴我。

原文：https://blog.logrocket.com/8-dom-features-you-didnt-know-existed-ec2a0a28fd89