寫在前面：
本文主要內容包括js原生dom物件和jQuery物件的區別，聯絡，相互轉換，以及踩坑經歷。情況是這樣的，今天在實現一個js驗證碼的功能，需要獲取input的值，然後我用jQuery的方法獲取到了dom節點，然後用原生js獲取input的值，結果就出錯了，好在後來場外求助啟宸歐巴在師兄的幫助下發現問題所在，併成功解決。將今天的踩坑經歷，以及網上查閱的資料，集合成一篇文章，分享一波。
Dom原生物件和jQuery物件的區別：
1.jquery選擇器得到的jquery物件和標準的 javascript中的document.getElementById()取得的dom物件是兩種不同的物件型別，兩者不等價；
注：js原生獲取的dom是一個物件，jQuery物件就是一個陣列物件，其實就是選擇出來元素的陣列集合。所以說他們兩者是不同的物件型別不等價。
2.jQuery無法使用DOM物件的任何方法，同理DOM物件也不能使用jQuery裡的方法. 亂使用會報錯。
例如（文章下面有兩個踩坑經歷。）：
$(“#id”).html();
document.getElementById(“id”).innerHTML;
意思是指：獲取ID為id的元素內的html程式碼。這兩段程式碼結果相同，但中間的取值過程不同。
即：$(“#id”).innerHTML、document.getElementById(“id”).html()之類的寫法都是錯誤的。
注：jQuery是從js衍生出來的，師出同源，但是jQuery是經過一系列操作之後，將其封裝成了一個個不同的方法，學習jQuery開始就應當樹立正確的觀念，分清jQuery物件和DOM物件之間的區別，之後學習 jQuery就會輕鬆很多的。
js-dom物件和jQuery物件相互轉換：
jQuery物件轉成DOM物件—兩種轉換方式：[index]和.get(index)
1、jQuery物件是一個資料物件，通過[index]的方法（就是通過下標索引尋找dom，進行操作）
如：var $v = $(“#v”) ; //jQuery物件
var v = $v[0]; //DOM物件
alert(v.checked) //檢測這個checkbox是否被選中
2、jQuery本身提供，通過.get(index)方法
如：var $v = $(“#v”); //jQuery物件
var v = $v.get(0); //DOM物件
alert(v.checked) //檢測這個checkbox是否被選中
注：其實兩者都是同一個道理，即通過索引下標的方式，來尋找dom進行轉換。
DOM物件轉成jQuery物件:
對於DOM物件，只需用$()把DOM物件包裝起來，就可得到jQuery物件
如：var v=document.getElementById(“v”); //DOM物件
var $v=$(v); //jQuery物件
踩坑經歷：
今天出錯的問題：
出錯程式碼：
var randomCode=$("#js5-authCode").value;//用jq獲取dom，用js獲取值。
//console的時候，這裡會出現undefined。複製程式碼正確的應該：
var randomCode=$("#js5-authCode").val();//這裡的val()是jq的一種方法。複製程式碼再舉個例子：
$(“#id”).innerHTML）、document.getElementById(“id”).html()。
出錯點：第一個是用jq獲取dom，然後用js操作。第二個是用js獲取dom，然後用jq進行操作
總結
框架之類的東西都是封裝好了的一個個函式，中間會經歷一些操作，中間的取值過程也是不同，所以我們寫程式碼的時候儘量使用同一種方式來寫，不能混合使用，大概就是醬樣子。
參考資料：
Js – Dom原生物件和jQuery物件的聯絡、區別、相互轉換
DOM物件與jQuery物件的理解與分析
最後：希望看完的朋友點個喜歡，也可以關注一下我，現在這階段基本上每個月都不會少於十五篇文章（看到乾貨我也會進行分享）。碼字不易，感謝支援，感激不盡！
ps：目前待業，座標北京，求推薦工作。然後希望我寫哪方面的文章可以在底下評論，或者是私信我，雖然寫的不好，但我就當這是記錄自己成長的一種方式咯。（前提是我會了，如果不會我也會記下來，等會了的時候再更出來。）
掘金個人主頁 ，簡書主頁連結，csdn部落格主頁連結 ，github 。
以上。2017.4.13