before(),after(),prepend(),append()等新DOM方法簡介

来源:http://www.cnblogs.com/wulihe/archive/2017/11/22/7881014.html
-Advertisement-
Play Games

一、DOM API也在不斷升級 web前端標準一直在不斷升級，比方說，說了很多年的HTML5、CSS3，以及天天見的ES6。 然後，似乎就沒有然後了。實際上，除了HTML5/CSS3/ES6+，關於DOM標準也是在不斷升級進步，而且瀏覽器也在悄悄地進行跟進與支持。 然而，這種跟進與支持呢非常的低調與 ...


一、DOM API也在不斷升級

DOM標準以及更新

web前端標準一直在不斷升級，比方說，說了很多年的HTML5、CSS3，以及天天見的ES6。

然後，似乎就沒有然後了。實際上，除了HTML5/CSS3/ES6+，關於DOM標準也是在不斷升級進步，而且瀏覽器也在悄悄地進行跟進與支持。

然而，這種跟進與支持呢非常的低調與隱諱；加上行業的話語權大部分集中在JS工程師身上，同時DOM這種東西比較“低級”撐不起場面，因此各種什麼技術大會啊，分享會議啊絕對不會講這玩意兒的。

於是都叫他註意力很容易被帶走，而沒有意識到在DOM操作這一塊，現在實際上已經非常厲害了。

二、before(),after(),prepend(),append()等新增DOM API

接下來要介紹這些新增的DOM API方法，都比較新，其設計目的是可以像jQuery那樣，使用非常簡單的api，便利的操作dom元素。

這些api包括：before()，after()，replaceWith()，append()，prepend()，好，下麵一個一個介紹。

1. DOM API之before()

這裡的before()是個ChildNode方法，也就是節點方法。節點方法對應於元素方法。區別在於，節點可以直接是文本節點，甚至註釋等。但是，元素必須要有HTML標簽。

因此，before()的參數既可以是DOM元素，也可以是DOM節點，甚至可以直接字元內容，咦，感覺活脫脫的jQuery的before() API嘛？沒錯，真的很類似似，並且語義也是一樣的，表示當前節點的前面是XXX。

語法如下：

void ChildNode.before((節點或字元串)... 其它更多節點);

從語法可以看出before()方法支持多個參數，並且參數可以是節點對象，也可以是字元串對象。

至於具體細節，我們可以通過一個一個例子來實際驗證。

先來看一個最簡單例子，已知HTML如下：

<img id="img" src="mm0.jpg">

如果我們希望在圖片<img>前面插入寫文字，直接可以：

document.getElementById('img').before('美女：');

效果會是這樣：

圖片前面before()美女文字

如果我們插入的是一段HTML字元串，那效果又是怎樣的呢？如下：

document.getElementById('img').before('<strong>美女：</strong>');

結果，噹噹噹噹，HTML被轉義成了安全的普通文本顯示了，如下：

HTML字元串被文本化處理

可以看出原生DOM的before() API和jQuery中的before() API還是有差別的，在jQuery中，before()的參數值是作為html字元處理的，但是這裡的before()是作為text字元處理的。

如果我們想要在圖片前面插入HTML內容，可以使用DOM節點方式插入，例如：

var eleTitle = document.createElement('h4');
eleTitle.innerHTML = '美女：';
document.getElementById('img').before(eleTitle);

則會表現如下：
brfore()插入h4標題後效果截圖

可能有人要疑問了，我非要在圖片前面插入HTML字元內容怎麼辦？

可以使用相容性更好的insertAdjacentHTML() DOM方法，使用示意如下：

document.getElementById('img').insertAdjacentHTML('beforebegin', '<strong>美女：</strong>');

語法如下：

element.insertAdjacentHTML(position, html);

非本文重點就不展開了。

元素DOM的before() API還有一個很棒的特性，那就是可以同時插入多個節點內容，例如：

document.getElementById('img').before('1. 美女', ' ', '2. 美女');

效果如下截圖所示：

同時插入多個節點內容截圖示意

demo演示
以上所有出現的before()效果都可以狠狠地點擊這裡體驗：DOM before()節點API方法demo

相容性
before() API Chrome54+，Firefox49+才支持，還算比較新，IE edge目前還未支持，具體參見下麵截圖（實時相容數據）：

before()等屬性相容性截圖

對於團隊或公司內部的一些項目，管理平臺或者工具之類的web頁面我們可以放心大膽使用before()等API，如果是面向用戶對相容性有要求的項目呢？

很簡單，加一段polyfill JS代碼就可以了，如下（參考自MDN）：

// 源自 https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('before')) {
      return;
    }
    Object.defineProperty(item, 'before', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function before() {
        var argArr = Array.prototype.slice.call(arguments),
          docFrag = document.createDocumentFragment();
        
        argArr.forEach(function (argItem) {
          var isNode = argItem instanceof Node;
          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
        });
        
        this.parentNode.insertBefore(docFrag, this);
      }
    });
  });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

註意，上面的polyfill 並不支持IE8及其以下瀏覽器。也就是before() API只能在至少相容到IE9瀏覽器的項目使用。

和insertBefore()比較
insertBefore()作為老牌傳統的API，優勢在於相容性好。不足之處，其語法著實很奇怪，A元素插到B元素前面，需要父元素parentNode.insertBefore(newNode, referenceNode)，小輩之間的打打鬧鬧牽扯到父輩，顯然事情就會麻煩。至少這麼多年下來insertBefore的參數究竟是新插入節點在前還是先插入節點在後，我都沒有準確記清楚。

但是，before() API就不一樣了，語法僅涉及到插入節點和相對節點，非常好記，不容易出錯，而且API名稱更短。

2. DOM API之after()

after()和before()的語法特性相容性都是一一對應的，差別就在於語義上，一個是在前面插入，一個是在後面插入。

由於語法類似，因此，就不一個一個示意了，若想直觀體驗after()的特性表現，您可以狠狠的點擊這裡：DOM after()節點API方法demo

然後下麵的JS代碼是對after() API的polyfill，同樣地，至少IE9+瀏覽器。

//源自 https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('after')) {
      return;
    }
    Object.defineProperty(item, 'after', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function after() {
        var argArr = Array.prototype.slice.call(arguments),
          docFrag = document.createDocumentFragment();
        
        argArr.forEach(function (argItem) {
          var isNode = argItem instanceof Node;
          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
        });
        
        this.parentNode.insertBefore(docFrag, this.nextSibling);
      }
    });
  });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

3. DOM API之replaceWith()

其語法如下：

ChildNode.replaceWith((節點或字元串)... 更多節點);

表示替換當前節點為其他節點內容。

舉個例子，把頁面上所有HTML註釋都替換成可顯示的普通文本節點。

如下JS代碼：

var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT);    

while (treeWalker.nextNode()) {
    var commentNode = treeWalker.currentNode;
    // 替換註釋節點為文本節點
    commentNode.replaceWith(commentNode.data);
}

例如頁面上有這麼一段註釋：
頁面上的註釋截圖

點擊某按鈕執行上面的JS代碼，結果這段註釋內容變成普通文本顯示在頁面上了，效果如下截圖：
註釋變成普通文本顯示截圖

眼見為實，您可以狠狠的點擊這裡：DOM replaceWith()節點API方法demo

對我們開發有沒有什麼啟示呢？比方說頁面模板可以放在註釋中……

同樣，如果對相容性又要求，可以使用下麵的JS polyfill（參考自MDN）：

function ReplaceWith(Ele) {
  var parent = this.parentNode,
      i = arguments.length,
      firstIsNode = +(parent && typeof Ele === 'object');
  if (!parent) return;
  
  while (i-- > firstIsNode){
    if (parent && typeof arguments[i] !== 'object'){
      arguments[i] = document.createTextNode(arguments[i]);
    } if (!parent && arguments[i].parentNode){
      arguments[i].parentNode.removeChild(arguments[i]);
      continue;
    }
    parent.insertBefore(this.previousSibling, arguments[i]);
  }
  if (firstIsNode) parent.replaceChild(this, Ele);
}
if (!Element.prototype.replaceWith) {
	Element.prototype.replaceWith = ReplaceWith;
}
    
if (!CharacterData.prototype.replaceWith) {
    CharacterData.prototype.replaceWith = ReplaceWith;
}
if (!DocumentType.prototype.replaceWith) {
    CharacterData.prototype.replaceWith = ReplaceWith;
}

4. DOM API之prepend()

其語法如下：

ParentNode.prepend((節點或字元串)... 更多節點);

表示在當前節點的最前面插入其它節點內容（作為子節點）。其意思和jQuery中的prepend() API是一樣的，對jQuery熟悉的人學習這幾個API都是分分鐘的事情。

參數值特性什麼的和before(), after()等方法類似，就不重覆展開。

若有興趣，您可以狠狠地點擊這裡：DOM prepend()節點API方法demo

對demo因為上的按鈕亂點一通之後，會發現所有插入內容都在最前面顯示：

prepend API demo頁面點擊截圖示意

在以前要想在元素節點的最前面插入內容，要麼使用insertBefore()找firstChild，要麼使用insertAdjacentHTML()或者insertAdjacentElement()方法，都很啰嗦。

prepend()這個api要更簡單和直接。

相容性和before()一模一樣，對於IE9+支持項目，可以輔助下麵的polyfill：

// 源自： https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('prepend')) {
      return;
    }
    Object.defineProperty(item, 'prepend', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function prepend() {
        var argArr = Array.prototype.slice.call(arguments),
          docFrag = document.createDocumentFragment();
        
        argArr.forEach(function (argItem) {
          var isNode = argItem instanceof Node;
          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
        });
        
        this.insertBefore(docFrag, this.firstChild);
      }
    });
  });
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);

5. DOM API之append()

其語法如下：

ParentNode.append((節點或字元串)... 更多節點);

表示在當前節點的最後面插入其它節點內容（作為子節點）。其意思和jQuery中的append() API是一樣的，細節上就是不支持html字元串直接顯示的差別。

您可以狠狠地點擊這裡：DOM append()節點API方法demo

所有點擊按鈕插入內容都在圖片後面，也就是容器裡面的最後顯示：
append() demo頁面效果截圖

polyfill如下：

// 源自： https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('append')) {
      return;
    }
    Object.defineProperty(item, 'append', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function append() {
        var argArr = Array.prototype.slice.call(arguments),
          docFrag = document.createDocumentFragment();
        
        argArr.forEach(function (argItem) {
          var isNode = argItem instanceof Node;
          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
        });
        
        this.appendChild(docFrag);
      }
    });
  });
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);

三、結束語

我們為什麼使用jQuery，一是DOM API的便利性，二是內部幫我們搞定了很多相容性問題，三是友好地擴展和插件機制。

如今，原生的DOM API借鑒jQuery的優點，也整齣了很多簡單遍歷的API方法；如果我們再粘貼一些polyfill JS搞定相容性問題；再配合ES5很多數據處理方法；DOM leave 3的事件處理等。

基本上就沒有需要使用jQuery的理由了，省了資源載入，提高了代碼性能，還裝了回嗶哩嗶哩。

所以，基本上，已經不可逆地，在不久將來，不出幾年，行業會興起原生DOM API，原生JS開發前端應用的小風尚，jQuery會越來越不被人提起，完成其歷史使命，日後可以領取個終身成就獎。

另外，還有類jQuery的API本文沒有介紹，例如Node.remove()，這個API出現相對要早一些，和前面介紹的不是一波出來的，因此沒放到一起介紹。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 初探js和簡單隱藏效果
    js:在頁面中用戶操作頁面時發生的效果都是Js功勞。操作有點擊，移入，和移出等。。。 例1：通過display隱藏盒子 當通過變數名var可以 繼續實現： 也可以通過透明的opacity,和高度來控制隱藏和顯示。 製作百度登錄效果，點擊登錄，彈出登錄視窗，及退出 （即使簡單也不可餓大意，以上便是di ...
  • sublime text配置node.js調試
    1.安裝node-inspector npm install -g node-inspector 2.安裝完成之後啟動 inspector 服務： node-inspector & 3.在chrome瀏覽器中打開：http://127.0.0.1:8080/?port=5858 4.打開想要debu ...
  • github相關問題
    一、項目編譯打包後生成的dist文件夾後；項目提交到github上dist文件提交不上去。 在.gitignore文件，刪除一行 二、更改github的語言屬性 .gitattributes文件：若項目是Vue屬性 ...
  • Date方法整理
    作用：處理時間和日期 一、創建方式 1.var mydate = new Date() —— 當前電腦時間 2.var mydate = new Date("2015-1-1") —— 創建時間 二、Date內置方法 var myDate = new Date(); console.log(myD ...
  • 利用JavaScript製作計算器
    查看原文 ...
  • 從cdn說起
    為什麼要使用cdn 雅虎軍規有一條規則建議我們是用cdn。隨便在網上搜索，可以找到使用的cdn的好處。 再次強調第一條黃金定律，減少網頁內容的下載時間。提高下載速度還可以通過CDN(內容分髮網絡)來提升。CDN通過部署在不同地區的伺服器來提高客戶的下載速度。如果你的網站上有大量的靜態內容，世界各地的 ...
  • JS中的邏輯運算符&&、||，位運算符|，&
    1、JS中的||符號： 運算方法： 只要“||”前面為false,不管“||”後面是true還是false，都返回“||”後面的值。 只要“||”前面為true,不管“||”後面是true還是false，都返回“||”前面的值。 總結：真前假後 2、JS中的&&符號： 運算方法： 只要“&&”前面是 ...
  • Sublime-----插件的安裝
    由於最近剛換了一個工作，所以決定重新申請一個blog，把工作當中遇到的一些問題記錄下來，方便自己下次忘記，也希望能與一起需要的小伙伴一起共勉。 如果有不同的觀點或者是不同的看法，大家都可以暢談，我一直認為討論、實踐才是提升自己能力的真正‘路徑’。。。（好啦，進入今天的主題） 在這份工作開始之前，我一 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類