之前項目一直都是用JQuery或者Vue來做的，確實好用，畢竟幫我們解決了很多瀏覽器兼容問題，但是後面發現大公司面試題都是要原生Javascript來做，然後我就一臉懵逼哈哈哈，畢竟大公司需要的框架或者庫好多都是公司內部自己構建的，所以說到頭來還是要原生JavaScript，這裏總結了一些原生js常用的dom操作函數。

一：節點關系

 //元素的子元素都可以通過someNode下的childNodes對象來訪問
 var firstChild = someNode.firstChild;          //獲得第一個子元素
 var lastChild = someNode.lastChild;            //
 
獲得最後一個子元素 
 var secondChild = someNode.childNodes[1];      //獲得第二個子元素
 var secondChild = someNode.childNodes.item(1)  //獲得第二個子元素
 var count = someNode.childNodes.length;        //獲得子元素個數  
 var parentNode = someNode.parentNode;          //獲得父元素

 var prevNode = someNode.previousSibling;       //獲得前一個同胞元素，如果沒有則為null
 

 var nextNode = someNode.nextSibling;           //獲得後一個同胞元素，如果沒有則為null

 var isHave = someNode.hasChildNodes();         //節點包含一個或多個子節點返回true
 
 var owner = someNode.ownerDocument;            //指向表示整個文檔的文檔節點

二：操作節點

appendChild(newNode): 在節點子元素列表最後插入一個新節點，返回新增節點，如果節點本來就是文檔的一部分，那就是將節點從原來的位置移到新位置。

var returnedNode = someNode.appendChild(newNode);  

insertBefore(newNode, 參照節點): 在指定節點之前插入一個新的節點。

 var returnedNode = someNode.insertBefore(newNode, null)  //參照物為null，則插入子節點列表最後
 var returnedNode = someNode.insertBefore(newNode, someNode.fisrtChild) //以第一個子節點為參照物，相當於新節點變成了第一個子節點

replaceChild(newNode，參照節點): 用新的節點替換舊節點，返回被替換的節點，被替換的節點依然屬於文檔，只是沒有了位置。

  var returnedChild = someNode.replaceChild(newNode, someNode.firstChild) //新節點替換第一個子元素

removeChild(): 移除一個子節點，並且作為返回值返回，被移除的節點依然屬於文檔，只是沒有了位置。

var formerFirstChild= someNode.removeChild(someNode.firstChild); //移除第一個子節點

cloneNode(布爾值)：復制一個節點，當參數為false時只復制節點本身，當參數為true是復制節點和他的所有子節點樹。該函數不會復制事件處理程序，但是ie存在一個bug會復制處理程序，所以復制前最好先移除事件處理程序。

有這樣的html代碼：

<ul>
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
 </ul>

  假設我們已經將<ul>元素的引用保存在了myList中。

  var deepList = myList.cloneNode(true); 
  alert(deepList.childNodes.length); //3(IE < 9) 或 7(其他瀏覽器)

  var deepList = myList.cloneNode(false);
  alert(deepList.childNodes.length);  //0

原生JavaScript常用的DOM操作