JavaScript插入節點小結

時間 2019-12-09

標籤 javascript 插入節點小結欄目 JavaScript 简体版

原文原文鏈接

　　JS原生API插入節點的方式大體有innerHTML、outerHTML、appendChild、insertBefore、insertAdjacentHTML、applyElement這6種。javascript

　　這裏總結一下各自的用法，並封裝包含before、prepend、append、after、applyElement的一系列函數。html

1、六種方式的用法

　　innerHTML：獲取標籤內部的HTML內容。java

　　outerHTML：獲取包括目標標籤在內，以及內部HTML的內容。node

　　appendChild：向目標標籤末尾添加子節點，返回參數節點。設計模式

　　insertBefore：向目標節點的第二個參數位置添加第一個參數爲子節點，返回第一個參數。瀏覽器

　　insertAdjacentHTML：向目標節點的指定位置添加節點；第二個參數爲要添加的節點，第一個參數指定位置，位置包括beforebegin(添加爲previousSibling)、afterbegin(添加爲firstChild)、beforeend(添加爲lastChild)、afterend(添加爲nextSibling)。它還有兩個兄弟函數，分別是insertAdjacentElement和insertAdjacentText，前者添加元素並返回該元素，後者添加文本。app

　　applyElement：IE的函數，將參數節點設置成目標節點的外包圍或者內包圍；第一個爲參數節點，第二個參數指定方式，方式包括inside(內包圍，即參數節點將目標節點的子節點包起來)、outside(外包圍，即參數節點將目標節點包起來)。框架

　　上面6種方式除了前兩個是屬性外，另外4個都是函數。innerHTML與outerHTML沒有什麼好說的，直接用HTML字符串賦值就能達到插入的目的了；appendChild簡單套一層函數外殼就能封裝成append函數；insertBefore讓節點的插入方式很是靈活；insertAdjacentHTML能夠實現字符串的插入方式；applyElement函數兼容一下便可成爲JQuery的Wrap系列函數。dom

2、實現before、prepend、append、after函數

　　before把參數節點插入到目標節點前面，只需獲取目標節點的父節點，而後父節點調用insertBefore便可。ide

　　prepend把參數節點插入到目標節點第一個子節點的位置，獲取目標節點的第一個子節點，而後調用insertBefore便可。

　　append的功能和原生API裏appendChild的功能同樣。

　　after把參數節點插入到目標節點的後面，只需獲取目標節點的nextSibling，而後調用insertBefore便可。

　　具體實現以下：

var append = function(node, scope) {
    if(node.nodeType === 1 || node.nodeType === 9 || node.nodeType === 11) {
        scope.appendChild(node);
    }
};
var prepend = function(node, scope) {
    if(node.nodeType === 1 || node.nodeType === 9 || node.nodeType === 11) {
        scope.insertBefore(node, scope.firstChild);
    }
};
var before = function(node, scope) {
    if(node.nodeType === 1 || node.nodeType === 9 || node.nodeType === 11) {
        scope.parentNode.insertBefore(node, scope);
    }
};
var after = function(node, scope) {
    if(node.nodeType === 1 || node.nodeType === 9 || node.nodeType === 11) {
        scope.parentNode.insertBefore(node, scope.nextSibling);
    }
};

　　上面函數只能插入元素節點、文檔節點以及文檔碎片，都是節點類型。若是咱們想要支持字符串形式的插入方式，則須要封裝insertAdjacentHTML了。

　　這裏利用策略模式，將我要實現的四個函數作成策略對象，而後動態生成，以達到精簡代碼的效果：

//E5纔有的迭代, 因此迭代要預先兼容
Array.prototype.forEach = [].forEach || function(callback) {
    for(var i = 0, len = this.length; i < len; i++) {
        callback.call(this[i], this[i], i, this);
    }
};  

/**插入策略集合**/
var insertStrategies = {
    before : function(node, scope) {
        scope.parentNode.insertBefore(node, scope);
    },
    prepend : function(node, scope) {
        scope.insertBefore(node, scope.firstChild);
    },
    append : function(node, scope) {
        scope.appendChild(node);
    },
    after : function(node, scope) {
        scope.parentNode.insertBefore(node, scope.nextSibling);
    },
    
    /*支持字符串格式的插入, 注意：要兼容不可直接作div子類的元素*/
    /*insertAdjace還有Element和Text，前者只能插元素，後者只能插文本*/
    beforestr : function(node, scope) {
        scope.insertAdjacentHTML('beforeBegin', node);
    },
    prependstr : function(node, scope) {
        scope.insertAdjacentHTML('afterBegin', node);
    },
    appendstr : function(node, scope) {
        scope.insertAdjacentHTML('beforeEnd', node);
    },
    afterstr : function(node, scope) {
        scope.insertAdjacentHTML('afterEnd', node);
    }
};

//響應函數
var returnMethod = function(method, node, scope) {
    //若是是字符串
    if(typeof node === 'string') {
        return insertStrategies[method + 'str'](node, scope);
    }
    //1(元素)、9(文檔)、11(文檔碎片)
    if(node.nodeType === 1 || node.nodeType === 9 || node.nodeType === 11) {
        return insertStrategies[method](node, scope);
    }
    //此處還可添加節點集合的處理邏輯，用於處理選擇其引擎獲取的節點集合。
};

['before', 'prepend', 'append', 'after'].forEach(function(method){
    window[method] = function(node, scope) {
        returnMethod(method, node, scope);
    };
});

　　全部函數都被實現爲window的屬性，因此直接當全局函數調用便可，這些函數並不屬於節點對象，因此scope參數指代的是目標節點。下面兼容applyElement後，咱們將全部的函數都擴展到HTMLElement的原型上面去，這樣就能夠省略scope參數，以達到元素節點直接調用的效果。固然對於框架來講，通常是生成框架對象，而後把這些函數擴展到其原型上去，這樣能夠避免修改原生對象的原型。

3、兼容applyElement

　　applyElement函數是IE私有實現，因此想在其餘瀏覽器中使用，咱們得相似Array的forEach同樣在對象原型上兼容一下。

　　其實要達到新元素包含目標節點或者包含目標元素的子節點用innerHTML與outerHTML也能作到。可是這必然會存在一個問題：當新元素是dom樹的一部分，而且它也有一系列子節點，那麼它的子節點應該怎麼處理？留在原地仍是併入目標元素中？若是併入目標元素中是目標元素的在前仍是新元素的在前？

　　wrap系列函數效果只是挪走新元素標籤裏的內容，它的子元素呈現的效果就是變成新元素父節點點的子節點。這種方式也能夠用Range對象來實現，固然也能夠用innerHTML與outerHTML來實現。我這裏用Range對象實現一遍。

/*兼容IE的applyElement*/
HTMLElement.prototype.removeNode = HTMLElement.prototype.removeNode || function(deep) {
    if(this.parentNode) {
        var range = this.ownerDocument.createRange();
        range.selectNodeContents(this);
        if(!deep) {
            var fragment = range.extractContents();
            range.setStartBefore(this);
            range.insertNode(fragment);
            range.detach();
        }
        return this.parentNode.removeChild(this);
    }
}; 

HTMLElement.prototype.applyElement = HTMLElement.prototype.applyElement || function(node, where) {
    node = node.removeNode();
    where = (where || 'outside').toLowerCase();
    var range = this.ownerDocument.createRange();
    if(where === 'inside') {
        range.selectNodeContents(this);
        range.surroundContents(node);
        range.detach();
    }else if(where === 'outside') {
        range.selectNode(this);
        range.surroundContents(node);
        range.detach();
    }
    return node;
};

4、將全部函數擴展到HTMLElement的原型上

　　思路和修復applyElement同樣，咱們只需將window[method]替換成HTMLElement.prototype[method]，批量生成時傳遞的scope改爲this便可達成。

//E5纔有的迭代, 因此迭代要預先兼容
Array.prototype.forEach = [].forEach || function(callback) {
    for(var i = 0, len = this.length; i < len; i++) {
        callback.call(this[i], this[i], i, this);
    }
};  

/**插入策略集合**/
var insertStrategies = {
    before : function(node, scope) {
        scope.parentNode.insertBefore(node, scope);
    },
    prepend : function(node, scope) {
        scope.insertBefore(node, scope.firstChild);
    },
    append : function(node, scope) {
        scope.appendChild(node);
    },
    after : function(node, scope) {
        scope.parentNode.insertBefore(node, scope.nextSibling);
    },
    
    /*支持字符串格式的插入, 注意：要兼容不可直接作div子類的元素*/
    /*insertAdjace還有Element和Text，前者只能插元素，後者只能插文本*/
    /**/
    beforestr : function(node, scope) {
        scope.insertAdjacentHTML('beforeBegin', node);
    },
    prependstr : function(node, scope) {
        scope.insertAdjacentHTML('afterBegin', node);
    },
    appendstr : function(node, scope) {
        scope.insertAdjacentHTML('beforeEnd', node);
    },
    afterstr : function(node, scope) {
        scope.insertAdjacentHTML('afterEnd', node);
    }
};

//響應函數
var returnMethod = function(method, node, scope) {
    //若是是字符串
    if(typeof node === 'string') {
        //低版本瀏覽器使用機會畢竟少數，每次都要判斷很划不來。這段代碼捨棄
        /*if(!scope.insertAdjacentHTML){
            throw new Error('(Firefox8-、IE4-、Opera7-、Safari4-)瀏覽器不能插入字符串!');
        }*/
        return insertStrategies[method + 'str'](node, scope);
    }
    //1(元素)、2(屬性)、3(文本)、9(文檔)、11(文檔碎片)
    if(node.nodeType === 1 || node.nodeType === 9 || node.nodeType === 11) {
        return insertStrategies[method](node, scope);
    }
    //此處還可添加節點集合的處理邏輯(用文檔碎片)
};

['before', 'prepend', 'append', 'after'].forEach(function(method){
    HTMLElement.prototype[method] = function(node) {
        returnMethod(method, node, this);
    };
});

/*兼容IE的applyElement*/
HTMLElement.prototype.removeNode = HTMLElement.prototype.removeNode || function(deep) {
    if(this.parentNode) {
        var range = this.ownerDocument.createRange();
        range.selectNodeContents(this);
        if(!deep) {
            var fragment = range.extractContents();
            range.setStartBefore(this);
            range.insertNode(fragment);
            range.detach();
        }
        return this.parentNode.removeChild(this);
    }
}; 

HTMLElement.prototype.applyElement = HTMLElement.prototype.applyElement || function(node, where) {
    node = node.removeNode();
    where = (where || 'outside').toLowerCase();
    var range = this.ownerDocument.createRange();
    if(where === 'inside') {
        range.selectNodeContents(this);
        range.surroundContents(node);
        range.detach();
    }else if(where === 'outside') {
        range.selectNode(this);
        range.surroundContents(node);
        range.detach();
    }
    return node;
};

5、測試

　　測試代碼以下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>插入節點.html</title>
    <script type="text/javascript" src='./insertNode.js'></script>
  </head>
  <body>
  
    <div id='div' style='background:#888;border:1px solid #888;padding:10px;'>座標div</div>
    <div id='inside' style='background:#0f0;border:1px solid #888;padding:10px;'>inside</div>
    <div id='outside' style='background:#F00;border:1px solid #888;padding:10px;'>outside</div>
    
    <script type="text/javascript">
        var div = document.getElementById('div');
        
        var beforeDiv = document.createElement('div');
        beforeDiv.innerHTML = 'beforeDiv';
        beforeDiv.style.background = '#eee';
        
        var prepEndDiv = document.createElement('div');
        prepEndDiv.innerHTML = 'prepEndDiv';
        prepEndDiv.style.background = '#ff0';
        
        var appendDiv = document.createElement('div');
        appendDiv.innerHTML = 'appendDiv';
        appendDiv.style.background = '#0ff';
        
        var afterDiv = document.createElement('div');
        afterDiv.innerHTML = 'afterDiv';
        afterDiv.style.background = '#f0f';
        
        div.before(beforeDiv);
        div.prepend(prepEndDiv);
        div.append(appendDiv);
        div.after(afterDiv);
        
        //測試文本插入
        div.append('[我是樂小天，我來測試直接插入文本]');
        
        //測試外包含和內包含
        var outside = document.getElementById('outside');
        var inside = document.getElementById('inside');
        outside.applyElement(inside, 'inside');
    </script>
  </body>
</html>