隨着web的技術突飛猛進的發展。HTML5 ES6等新技術的發展，與此同時DOM等標准也在悄悄的進步，各大瀏覽器也在悄悄的發展適配新的屬性和方法，今天我們來看看Javascript新的DOM的方法
二、before(),after(),prepend(),append()等新增DOM
before()
before()是個ChildNode方法，也就是節點方法。節點方法對應於元素方法。區別在於，節點可以直接是文本節點，甚至注釋等。但是，元素必須要有HTML標簽。
因此，before()的參數既可以是DOM元素，也可以是DOM節點，甚至可以直接字符內容;
語法如下
void ChildNode.before((節點或字符串)... 其它更多節點);
DOM案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <img id="images" src="detail.jpg" alt=""> 9 <p><button id="beforeText">圖片前面插入文字“美女：”</button></p> 10 </body> 11 </html> 12 13 <script> 14 //插入節點的方法 15 var eleImg = document.getElementById('images'); 16 var eleBtnBeforeText = document.getElementById('beforeText'); 17 eleBtnBeforeText.addEventListener('click', function () { 18 var eleTitle=document.createElement('h1'); 19 eleTitle.innerHTML='美女'; 20 eleImg.before(eleTitle); 21 }); 22 23 </script>
這是插入DOM節點，那可不可以指接拆入純文本呢O(∩_∩) 淡然可以，我們再看一下純文本代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="images" src="detail.jpg" alt="">
<p><button id="beforeText">圖片前面插入文字“美女：”</button></p>
</body>
</html>
<script>
//插入節點的方法
var eleImg = document.getElementById('images');
var eleBtnBeforeText = document.getElementById('beforeText');
eleBtnBeforeText.addEventListener('click', function () {
eleImg.before("我是文字");
});
</script>
顯然是可以的，那插入HTML字符串呢
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <img id="images" src="detail.jpg" alt=""> <p><button id="beforeText">圖片前面插入文字“美女：”</button></p> </body> </html> <script> //兼容處理源自 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]); </script> <script> //插入節點的方法 var eleImg = document.getElementById('images'); var eleBtnBeforeText = document.getElementById('beforeText'); eleBtnBeforeText.addEventListener('click', function () { eleImg.before('<strong>美女：</strong>'); }); </script>
可以看吃是不可以直接插入HTML字符串的，有人要疑問了，我非要在圖片前面插入HTML字符內容怎么辦
可以使用兼容性更好的insertAdjacentHTML() DOM方法，使用示意如下：
document.getElementById('img').insertAdjacentHTML('beforebegin', '<strong>美女：</strong>');
語法如下：
element.insertAdjacentHTML(position, html);
<html>
<head>
<mce:script language="javascript"><!--
function myfun(){
var obj = document.getElementById("btn1");
obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">");
}
// --></mce:script>
</head>
<body>
<input name="txt">
<input id="btn1" name="btn1" type="button" value="更多" onclick="myfun()">
</body>
</html>
更加詳細的關於點擊insertAdjacentHTML
after()
after跟before()語法特性兼容性都是一一對應的，差別就在於語義上，一個是在前面插入，一個是在后面插入。，這里就不更詳細的解釋了
重點
after（）與before這些新的方法有兼容性，兼容版本如下圖所示
如果非要再舊版瀏覽器使用新的API屬性怎么辦呢，我們需要引入一段代碼來讓老式瀏覽器兼容
// 源自 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及其以下瀏覽器。 API只能在至少兼容到IE9瀏覽器的項目使用。
】結束
三、結束語
我們如今，原生的DOM API借鑒jQuery的優點，也整出了很多簡單遍歷的API方法；如果我們再粘貼一些polyfill JS搞定兼容性問題；再配合ES5很多數據處理方法；DOM leave 3的事件處理等。
基本上就沒有需要使用jQuery的理由了，省了資源加載，提高了代碼性能，
所以，基本上，已經不可逆地，在不久將來，不出幾年，行業會興起原生DOM API，原生JS開發前端應用的小風尚，jQuery會越來越不被人提起，完成其歷史使命，日后可以領取個終身成就獎。
