這裡說說一些原生js操作dom的方法：
1，元素的獲取     
getElementById()，getElementsByTagName()，getElementsByClassName()，這裡要注意這個getElementsByClassName()在ie8以下是不相容的。

//相容寫法
function getByClassName(className){    
            if(document.getElementByClassName){    
                return document.getElementByClassName(className) 
                //FF下因為有此方法，所以可以直接獲取到；    
            }    
            var nodes=document.getElementsByTagName("*");//獲取頁面裡所有元素，因為他會匹配全頁面元素，所以效能上有缺陷，但是可以約束他的搜尋範圍；    
            var arr=[];//用來儲存符合的className；    
            for(var i=0;i<nodes.length;i++){    
                if(hasClass(nodes[i],className)) arr.push(nodes[i]);    
            }    
            return arr;    
        }  


         function hasClass(node,className){    
            var cNames=node.className.split(/\s+/);//根據空格來分割node裡的元素；    
            for(var i=0;i<cNames.length;i++){    
                if(cNames[i]==className) return true;    
            }    
            return false;    
        }

2，元素操作方法</p><p>      
    (1)node.appendChild(node1)：向某個節點新增一個子節點，這個新增的節點會被放在最後，成為這個節點的最後一個子節點；
    (2)node.removeChild(node1)：移除某個節點     
        <div id="test" class="test" name="test">
<p id="ptest">123</p>
</div>
<script type="text/javascript">
var div = document.getElementById("test");
var p = document.getElementById("ptest");
div.removeChild(p);
</script>




      (3)insertBefore(nodo1, node2),將node1作為當前元素的子節點，插入到當前元素的節點node2的前面
<div id="test" class="test" name="test">
<p id="ptest">123</p>
</div>
<p id="ptest2"></p>
<script type="text/javascript" charset="utf-8">
var div = document.getElementById("test");
var p = document.getElementById("ptest");
var p2 = document.getElementById("ptest2");
//div.removeChild(p);
div.insertBefore(p2, p);
</script>


這裡注意了，inserBefore的第二個引數，div的子節點，就是p要是div的子節點


(4)replaceChild(newnode, oldnode);新節點，代替糾結點
<div id="test" class="test" name="test">
<p id="ptest">123</p>
</div>
<p id="ptest2"></p>
<script type="text/javascript" charset="utf-8">
var div = document.getElementById("test");
var p = document.getElementById("ptest");
var p2 = document.getElementById("ptest2");
//div.removeChild(p);
//div.insertBefore(p2, p);
div.replaceChild(p2, p);
</script>
    這裡注意了，replaceChild的第二個引數，div的子節點，就是p要是div的子節點    

3，獲取節點

 (1)hasChildnodes() 這個方法返回一個布林值，指示元素是否有子元素。

(2)childNodes 返回當前指定元素所有子元素(包括被註釋掉的元素)的陣列: document.body.childNodes;

它返回指定元素的子元素集合，包括HTML節點(元素節點），文字節點(空格也是文字節點)。可以通過nodeType來判斷是哪種型別的節點，只有當nodeType==1時才是元素節點，2是屬性節點，3 是文字節點。

(3)children返回當前指定元素所有子元素，但是與childNodes 不同的是，他只會返回HTML節點(元素節點)，不返回文字節點。

(4)firstChildelem

這個獲取到的節點是以childNodes為 標準的，就是包括HTML節點(元素節點），文字節點(空格也是文字節點)，所以返回的有可能是一個文字節點

(5)lastChildelem.lastChild返回當前元素下的最後一個子節點。

  這個獲取到的節點是以childNodes為 標準的，就是包括HTML節點(元素節點），文字節點(空格也是文字節點)，所以返回的有可能是一個文字節點

(6)nextSbilingelem.nextSbiling 返回緊跟在當前節點後的那一個同級節點(同級元素，不是子元素)。

這個獲取到的節點是以childNodes為 標準的，就是包括HTML節點(元素節點），文字節點(空格也是文字節點)，所以返回的有可能是一個文字節點

(7)previousSiblingelem.previousSibling 返回前一個同級節點，跟nextSbiling類似，只不過nextSbiling是返回後一個，

(8)parentNodeelem.parentNode 返回父節點

4，屬性操作

(1)elem.getAttribute(name); 獲取元素屬性

(2)elem.setAttribute(name, value); 設定元素屬性

5，建立元素、文字節點

(1) var p = document.createElement("p"); 建立元素，裡面的“p”，就是代表建立p元素

div.appendChild(p);

(2) var txt = document.createTextNode("這是文字"); 這是建立文字元素

p.appendChild(txt);

6，獲取元素，節點的值

<p id="test">123</p> 要獲取p之下的文字值

1, document.getElementById("test").childNodes[0].nodeValue；(這裡不能用children替換childNodes，因為children獲取不到 文字節點)

2, document.getElementById("test").innerTEXT;

3, document.getElementById("test").innerHTML;

注意這裡2個3是有區別的：

<p id="test"><a href="#">123</a></p>

如果是這樣 那麼2的值還是 123， 但是3的值就是a href="#">123</a>，就是說innerHTML會連html標籤也拿到，但是innerText不會