放棄jQuery？你絕對沒用這6個原生DOM方法！

jQuery得以流行的主要原因是可讓程序員輕鬆地選擇DOM元素，遍歷並修改其內容。但這是在很多年前，那時程序員還被IE7困擾，ECMAScript 5還未面世。

在那之後，世界發生了翻天覆地的變化。瀏覽器已經變得稱心如意，JavaScript出現了跨越式發展。這時，就有程序員站出來說，「我們還需要jQuery嗎？」恐怕你是不知道這六個原生DOM方法吧！看完，沒準你會因為jQuery庫夠酷而愛上JavaScript！

1、append()

append方法執行插入操作，即將節點添加到DOM樹。它將參數附加到被調用節點的子節點列表中，請考慮以下示例：

程序員或許會問：這與本機appendChild方法有什麼不同呢？第一個區別是，anappend()可以一次使用多個參數，相應的節點將被附加到子列表中。繼續代碼：

此外，一個參數可以是一個字元串。所以，使用appendChild()時，必須使用相當詳細的語法：

parent.appendChild（document.createTextNode（"just some text"））

與append()操作一樣短：

字元串轉換為Text節點，因此不會解析任何HTML：

這與jQuery方法形成對照，該方法分析了標記字元串，並生成相應節點插入到DOM樹中。

通常情況下，如果附加節點已存在於樹中，則首先從其舊位置移除：

append()和appendChild()之間的最後一個區別是後者返回附加節點，而前者返回undefined。

2、prepend()

prepend方法與append()非常相似。添加了子項，但是它們將被添加到調用該方法節點的子節點之前，就在第一個子節點之前：

方法的返回值為undefined。

3、after()

after方法是另一種插入方法，但它必須在子節點之後調用，也就是一個具有確定父節點的節點。節點作為相鄰的兄弟節點插入，如以下所示：

返回值是undefined。

4. before()

before()與after()類似，但是在子節點之前插入：

返回值同樣是undefined。

5. replaceWith()

假設程序員想替換一個DOM節點。當然，他們可能有子節點，所以這個操作將替代整個DOM子樹。在介紹這套方法之前，將使用replaceChild（）：

可以使用replaceWith以不冗長的方式執行相同的操作：

除了較短的語法之外，此方法的一個特點是接受幾個參數，允許用其他節點列表替換一個節點。繼續以前的互動式JavaScript會話：

方法的返回值也是undefined。

6、remove()

從DOM樹中刪除節點怎麼辦？常用的方法是removeChild()。 如其名稱所示，它必須在被刪除節點n的父節點上調用：

然而，使用remove()，操作相當簡單：

本機與jQuery操作的不同之處在於如何處理附加到已刪除節點的事件偵聽器。 jQuery刪除與元素相關聯的所有綁定事件和數據，而本機方法不會觸及事件偵聽器：

這種行為更類似於jQuery detach方法。

瀏覽器支持

寫這篇文章時，這幾種方法所獲得的瀏覽器支持為：

prepend()>append()>before()>after()>replaceWith()

桌面瀏覽器如下：

• 谷歌瀏覽器從54版開始，全面支持上述方法。

• Firefox從49版本開始，全面支持上述方法。

• Safari從10版開始，全面支持上述方法。

• Opera從41版開始，全面支持上述方法。

但是，請注意：Internet Explorer並不支持，Microsoft Edge也不支持（儘管對於Edge而言，該功能正在開發中）。remove方法得到了更廣泛的支持，Microsoft Edge自14版本以來就實現了。

insertAdjacentHTML

結束之前，還想說幾句insertAdjacentHTML。它提供類似於上面列出的前四種方法的插入操作：append()，prepend()，after()，before()，並且要添加的內容使用HTML字元串指定：

請注意，我們必須使父節點成為另一個節點的子節點才能使用該位置參數beforebegin andafterend。

幸運的是，insertAdjacentHTML()隨處可見。

結論

看完這些方法之後，你認為jQuery如何？還是因為缺乏IE支持而打算放棄呢？程序員來說說你們的看法吧！萬一讓這個世界有點不同了呢！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！