[js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】詳解與應用

本文主要講解DOM常用的CURD操作，appendChild(往後追加節點),insertBefore(往前追加節點),removeChild(移除節點),replaceChild(替換節點),cloneNode(克隆節點)的語法與實戰應用

一、appendChild: 向元素的內部最後面增加一個節點，或者移動一個現有的節點到元素的內部最後面

用法:

someNode.appendChild( newNode )

someNode通常爲元素的父節點

返回值:返回新增加的節點

      <input type="text" name="" id="txt">
    <input type="button" value="添加" id="add">
    <ul id="box"></ul>
    <script>
        var oBtn = document.querySelector("#add");
        var oTxt = document.querySelector("#txt");
        var oBox = document.querySelector("#box");
        oBtn.onclick = function () {
            var oLi = document.createElement( "li" ); 
            oLi.innerHTML = oTxt.value;
            var returnNode = oBox.appendChild( oLi );
            console.log( returnNode === oLi ); //true
            console.log( returnNode === oBox.lastChild );//true
        }
    </script>

上例，把文本框的內容當做一個新節點，添加在id爲box的元素的最後面，返回值returnNode就是新增加的節點，

所以 第12行和第13行的返回值爲ture, lastChild表示元素的最後一個子節點

如果appendChild後面的參數是文檔現有的節點，那麼表示把當前節點移動到父元素的最後面

<input type="button" value="移動" id="btn">
    <ul id="box">
        <li><a href="javascript:;">王朝</a></li>
        <li><a href="javascript:;">馬漢</a></li>
        <li><a href="javascript:;">張龍</a></li>
        <li><a href="javascript:;">趙虎</a></li>
        <li><a href="javascript:;">ghostwu</a></li>
    </ul>
    <script>
        var oBtn = document.getElementById("btn");
        var oBox = document.getElementById("box");
        oBtn.onclick = function () {
            var firstChild = oBox.firstElementChild || oBox.firstChild;
            var lastChild = oBox.lastElementChild || oBox.lastChild;
            var returnNode = oBox.appendChild( firstChild );
            firstChild = oBox.firstElementChild || oBox.firstChild;
            lastChild = oBox.lastElementChild || oBox.lastChild;
            console.log( returnNode === firstChild ); //false
            console.log( returnNode === lastChild ); //true
        }
    </script>

二、insertBefore：向一個元素前面追加節點

用法:

someNode.insertBefore( newNode, referNode );

第一個參數: newNode，需要插入的節點

第二個參數: referNode, 參考節點，即：newNode會插入到這個參考節點的前面，

注意：如果第二個參數爲null, 效果等同於someNode.appendChild( newNode )

返回值:新插入的節點

<input type="text" id="txt">
    <input type="button" value="添加" id="add">
    <ul id="box"></ul>
    <script>
        var G = function ( id ){ return document.getElementById( id ) };
        var GG = function ( id, tag ){ return G(id).getElementsByTagName(tag) };
        var oTxt = G( "txt" ),
            oBox = G( "box" ),
            oAdd = G( "add" )
            aLi = GG( 'box', 'li' );
        oAdd.onclick = function(){
            var oLi = document.createElement("li");
            oLi.innerHTML = oTxt.value,
            returnNode = null;
            //等價於oBox.appendChild( oLi )
            // oBox.insertBefore( oLi, null );
            // oBox.appendChild( oLi );
            if( aLi[0] ) {
                returnNode = oBox.insertBefore( oLi, aLi[0] );
            }else {
                returnNode = oBox.insertBefore( oLi, null );
            }
            console.log( returnNode );
        }
    </script>

 三、removeChild: 移除一個節點

someNode.removeChild( node )

someNode通常爲父元素，node就是父元素下面的一個元素

返回值: 當前被移除的元素

<input type="text" name="" id="txt">
    <input type="button" value="移除" id="remove">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var oRemove = document.querySelector( "#remove" ); 
        var oUl = document.querySelector( "ul" );
        oRemove.onclick = function(){
            var n = parseInt( document.querySelector("#txt").value );
            var returnNode = oUl.removeChild( oUl.children[n] );
            console.log( returnNode );
        }
    </script>

上例，在輸入框中， 輸入需要移除的子節點的索引，即可完成移除節點操作.

四、replaceChild: 用新節點去替換已經存在的節點

用法:

someNode.replaceChild( newNode, node )

第一個參數：新節點

第二個參數: 被替換的節點

返回值: 返回當前被替換的子節點

 下例，有點小複雜，用了節點緩存（設計模式中的享元模式）提高替換節點的性能，雖然只有8個節點，如果是上萬個節點，會有明顯的提高.

<input type="button" value="替換" id="replace">
    <br>
    <span>第1個元素</span>
    <span>第2個元素</span>
    <span>第3個元素</span>
    <span>第4個元素</span>
    <span>第5個元素</span>
    <span>第6個元素</span>
    <span>第7個元素</span>
    <span>第8個元素</span>
    <script>
        var oReplace = document.querySelector("#replace"),
            aSpan = document.querySelectorAll("span"),
            page = 0, //當前頁
            perPage = 4, //每次替換4個
            total = Math.ceil(aSpan.length / perPage); //總頁數
        var cache = (function () {
            var aEle = [];
            var create = function () {
                var oDiv = document.createElement("div");
                aEle.push(oDiv);
                return oDiv;
            };
            return {
                getDiv: function () {
                    if (aEle.length < 4) {
                        console.log(1);
                        return create();
                    } else {
                        console.log(2);
                        var oDiv = aEle.shift();
                        aEle.push(oDiv);
                        return oDiv;
                    }
                }
            };
        })();
        var aCacheSpan = [];
        oReplace.onclick = function () {
            var oDiv = null;
            page++;
            if (page < 3) {
                if (aCacheSpan.length > 0) {
                    var oBox = document.querySelector('div');
                    for (var i = 0, len = aCacheSpan.length; i < len; i++) {
                        document.body.insertBefore(aCacheSpan[i], oBox);
                    }
                    aCacheSpan = [];
                }
                for (var i = (page - 1) * perPage; i < (page - 1) * perPage + perPage; i++) {
                    console.log(aSpan[i].innerHTML);
                    oDiv = cache.getDiv();
                    oDiv.innerHTML = aSpan[i].innerHTML;
                    aCacheSpan.push(document.body.replaceChild(oDiv, aSpan[i]));
                }
            }
        }
    </script>

 五、cloneNode: 複製一個節點

用法:

someNode.clone( bool值 )

參數有兩種情況:
如果爲true: 代表深拷貝: 即複製當前節點和他下面的所有子節點

如果爲false: 代表淺拷貝：即複製當前節點，不會複製他下面的子節點

返回值：返回當前被複制的元素

<input type="button" value="深拷貝" id="btn1">
    <input type="button" value="淺拷貝" id="btn2">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var oBtn1 = document.querySelector("#btn1");
        var oBtn2 = document.querySelector("#btn2");
        var oUl = document.querySelector( "ul" );
        oBtn1.onclick = function () {
            var aNode = oUl.cloneNode( true );
            console.log( aNode );
        }
        oBtn2.onclick = function () {
            var aNode = oUl.cloneNode( false );
            console.log( aNode );
        }
    </script>