js操作DOM元素

創建

document.createElement()

查找

document.getElementById()   返回對擁有指定 id 的第一個對象的引用。

document.getElementByName()   返回帶有指定名稱的對象集合。

document.getElementByTagName()   返回帶有指定標簽名的對象集合。

document.getElementsByClassName()   返迴文檔中所有指定類名的元素集合。存在相容性問題，IE6/7/8不支持

這裡，重新實現一個函數myGetElementsByClassName，相容IE6/7/8

        function myGetElementByClassName(classname) {
        var ele = [];
        if (!document.getElementsByClassName) {
            console.log("這是IE6/7/8吧");
            var dom = document.all ? document.all : document.getElementsByTagName('*');
            for (var i = 0; i < dom.length; i++) {
               // if (dom[i].className == classname)
                 //   ele.push(dom[i]);
                var reg=new RegExp('\\b'+classname+'\\b','g');
                if (reg.test(dom[i].className)) {
                    ele.push(dom[i]);
                }
            }   
        } else {
            ele = document.getElementsByClassName(classname);
            console.log('不是IE6/7/8 bro');
        }
        return ele;
    }

添加

appendChild()，返回新增的節點

    如果傳入到appendChild中的已經是文檔的一部分，則把該節點移動到新的位置

還有一種是insertBefore()，這種方法可以插入到指定位置。接收兩個參數，第一個是要插入的節點，第二個是作為參照的元素。要插入的節點會成為作為參照的節點的previousSibling。

替換

replaceChild()   接收兩個參數，第一個是要插入的節點，第二個是要替換的節點。

在使用replaceChild()插入一個節點時，該節點的關係指針都會從被它替換的節點複製過來。

移除

removeChild()   接收一個參數，要移除的節點。

複製

cloneNode() 用於創建調用這個方法的節點的一個完全相同的副本。

接收一個布爾值參數，如果為true則執行深複製，也就是複製節點以及整個子節點樹；如果為false則執行淺複製，也就是只複製節點本身。

複製後返回的節點副本屬於文檔所有，但是並沒有為它指定父節點，需要其他方法來添加到文檔中。

移動

移動元素一般是移動有的節點，三種方法：

第一種，使用appendChild()

第二種，使用insertBefore()

第三種，先複製要移動的節點，移除原來這個節點，然後把新得到的節點添加到文檔中。

    <div id="div1">11111111</div>
    <div id="div2">22222222</div>
    <div id="div3">33333333</div>
    <script type="text/javascript">
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');
        var div3 = document.getElementById('div3');
        //第一種方法
        document.body.appendChild(div1);
        //第二種方法
        document.body.insertBefore(div1,div3);
        //第三種方法
        var newNode = div1.cloneNode(true);
        document.body.removeChild(div1);
        document.body.insertBefore(newNode,div3);     
    </script>