一、DOM對象（Document Object Model）
- 百度百科：
DOM—Document Object Model,它是W3C國際組織的一套Web標準。它定義了訪問HTML文檔對象的一套屬性、方法和事件。 - 獲取Dom對象：
document.getElementById 方法根據id獲取單個Dom對象,
document.getElementsByTagName 方法根據標籤名獲取Dom對象集合
document.getElementsByName 方法根據名稱獲取Dom對象集合. - Dom對象的屬性和方法相對jQuery來收是比較少的。
<script type="text/javascript">
//根據id
function doTest4(){
var test1 = document.getElementById("test1");
alert(test1.value); //test1
}
//根據name屬性 （同名的情況多在checkbox的時候）
function doTest5(){
var test1 = document.getElementsByName("test1")[1];
alert(test1.value); //test2
}
//根據標籤名
function doTest6(){
var test1 = document.getElementsByTagName("input")[3];
alert(test1.value); //test4
}
</script>
<body>
<input type="text" id="test1" name="test1" value="test1">
<input type="text" id="test2" name="test1" value="test2">
<input type="text" id="test3" name="test1" value="test3">
<input type="button" id="test4" name="test4" value="test4" onclick="doTest4()">
<input type="button" id="test5" name="test5" value="test5" onclick="doTest5()">
<input type="button" id="test6" name="test6" value="test6" onclick="doTest6()">
</body>二、jQuery對象
jQuery對象就是通過jQuery包裝Dom對象得到的對象，實際是對Dom對象的擴展，是一個包裝集，可以使用jQuery的方法，雖然包裝Dom對象，但不能使用Dom對象的方法。
jQuery提供了強大的獲取jQuery功能，通過$ (“選擇器”)獲取一個jQuery對象。(9大選擇器)
jQuery包裝集是對Dom對象的擴展，但是兩個對象的屬性和方法並不同，所以需要注意返回的是jQuery對象還是Dom對象
jQuery對象是一個包裝集，所以無論獲取到一個元素還是多個元素，都會被封裝成一個jQuery包裝集。
從實際使用情況來看，jQuery包裝集裏面裝着的又是一個個的Dom對象。如下：
var test1 = $(“#test1”); //jQuery對象
var Domtest1 = test1[0]; //Dom對象
注意，在遍歷jQuery包裝集時，得到的每一個遍歷項（this）也是Dom對象，只能用Dom對象的屬性和方法
<head>
<base href="<%=basePath%>">
<title>My JSP 'ab_jQuery1.jsp' starting page</title>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//id選擇器(返回一個包裝集，但裏面只有一個元素)
function doTest4(){
var test1 = $("#test1");
alert(test1.val()); //jQuery對象取值API：.val();
alert(test1[0].value); //DOM對象取值API：.value;
}
//標籤選擇器(返回一個包裝集，但裏面有一個或多個元素)
function doTest5(){
var test1 = $("input");
alert(test1.val()); //jQuery對象取值API：.val(); 默認第一個元素
test1.each(function(){
//alert(this.val());// 報錯：Uncaught TypeError: this.val is not a function
alert(this.value);// 依次：test1,test2,test3,test4,test5
});
}
</script>
</head>
<body>
<input type="text" id="test1" name="test1" value="test1">
<input type="text" id="test2" name="test2" value="test2">
<input type="text" id="test3" name="test3" value="test3">
<input type="button" id="test4" name="test4" value="test4" onclick="doTest4()">
<input type="button" id="test5" name="test5" value="test5" onclick="doTest5()">
</body>三、Dom對象和jQuery對象的互轉
Dom轉jQuery
A、得到一個Dom對象：var DomObject = document.getElementById(“test1”);
B、轉換爲jQuery對象：var D2JObject = $(DomObject); //D2JObject爲jQuery對象，只能使用jQuery對應的屬性和方法jQuery轉Dom
獲取jQuery對象：var jQueryObject = $(“#test1”);（時刻想着這個對象就是一個包裝集，裏面裝着一個個的Dom元素，這樣，只要拿到這個包裝集內單個元素時，就已經是Dom元素）方式1：jQueryObject[index]
轉換爲Dom對象：var J2DObject1 = jQueryObject[0]; //Dom對象，只能使用Dom對應的屬性和方法方式2：jQueryObject.get(index)
轉換爲Dom對象：var J2DObject2 = jQueryObject.get(0); //Dom對象， 只能使用Dom對應的屬性和方法
注意，如果通過遍歷jQuery包裝集，得到的每一項（this），也都是Dom對象，只能使用Dom對應的屬性和方法，如果要使用jQuery對象，必須先轉爲jQuery對象:$(this)
<head>
<base href="<%=basePath%>">
<title>My JSP 'ac_Dom&jQuery.jsp' starting page</title>
<script type="text/javascript" src="${basePath }js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function doExchange(){
//Dom對象
var DomObject = document.getElementById("test1");
//jQuery對象
var jQueryObject = $("#test1");
//獲取值並輸出
//alert(DomObject.value); //test1
//alert(jQueryObject.val()); //test1
/**************************************/
//Dom轉jQuery
var D2JObject = $(DomObject);//D2JObject爲jQuery對象
//獲取值並輸出
//alert(D2JObject.val()); //test1
/**************************************/
//jQuery轉Dom（也可以說從jQuery中獲取Dom對象，因爲jQuery本身是包裝集，裏面裝着的就是Dom對象）
//方式1：jQueryObject[index]
var J2DObject1 = jQueryObject[0]; //Dom對象
//獲取值並輸出
//alert(J2DObject1.value); //test1
//方式2：jQueryObject.get(index)
var J2DObject2 = jQueryObject.get(0); //Dom對象
//獲取值並輸出
alert(J2DObject2.value); //test1
//注意：在遍歷jQuery包裝集時得到的每一項（this）也是Dom對象，
//因此，遍歷包裝集後，得到每一項並希望使用jQuery的屬性和方法，需要把這些項轉換爲jQuery對象:$(this)
}
</script>
</head>
<body>
<input type="text" id="test1" name="test1" value="test1">
<input type="text" id="test2" name="test2" value="test2">
<input type="text" id="test3" name="test3" value="test3">
<input type="button" id="test4" name="test4" value="test4" onclick="doExchange()">
</body>總結：首先要分清楚Dom對象和jQuery對象，對不同的對象使用不同的屬性和方法，不然總是會出現xxx is not a function 之類的報錯