2.1、DOM对象
使用JavaScript中的DOM API操作获得的元素对象叫DOM对象。文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
获得DOM对象的示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM元素</title> </head> <body> <h2>DOM元素</h2> <p id="foo">Foo</p> <p id="bar">Bar</p> <script type="text/javascript"> //获得文档中id为foo的元素 var foo=document.getElementById("foo"); //将元素的HTML内容修改为Foo DOM foo.innerHTML="Foo DOM"; //获得文档中标签名称为p的所有元素 var items=document.getElementsByTagName("p"); //向控制台输出元素数组的个数 console.log(items.length); //遍历数组中的元素 for (var i=0;i<items.length;i++) { //将每个元素的HTML内容增加DOM字符 items[i].innerHTML+=" DOM";
} </script> </body> </html>
示例中的foo是一个DOM对象，items是一DOM数组，innerHTML是DOM元素的一个属性。
运行结果：
调试：
在Chrome浏览器按Ctrl+Shift+I启动开发者工具，调试上面的代码，添加监视foo对象，在右侧展开监视的foo对象，可以看到该DOM对象的所有属性、方法与事件信息。
2.2、jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象叫jQuery对象。 jQuery对象是对DOM元素封装过后的数组，也称为包装集。无论选择器匹配了多个或者零个元素，jQuery对象都不再是null。意味着你只能够用jQuery对象的.length属性来判断选择器是否选中了元素。
获得jQuery对象的示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery对象</title> </head> <body> <h2>jQuery对象</h2> <p id="foo">Foo</p> <p id="bar">Bar</p> <script type="text/javascript" src="js/jQuery/jquery.min.js" ></script> <script type="text/javascript"> //从文档中获得id为foo的jQuery对象 var $foo=$("#foo"); //修改$foo元素的HTML内容为Foo jQuery $foo.html("Foo jQuery"); //获得页面中所有的p标签元素 var $items=$("p"); //从控制台输出元素个数 console.log($items.size()); //遍历并修改元素的HTML内容 $items.html($items.html()+" jQuery"); </script> </body> </html>
代码中的
是一个
对象
foo是一个jQuery对象,items也是一个jQuery对象。
运行结果：
调试：
从上面的调试信息中可以看到foo是一个长度为1的集合，集合中下标为0的元素就是1个DOM元素（0：p#foo），上DOM示例中的foo对象完全一样；可以看出foo是一个长度为1的集合，集合中下标为0的元素就是1个DOM元素（0：p#foo），上DOM示例中的foo对象完全一样；可以看出foo是对DOM元素foo的封装，使用功能更加强大，从隐式原型__proto__中的内容就可以看到，中间提供了大量的方法，事件与属性，简化操作。
2.3、DOM转换成jQuery对象
要使用jQuery中的方法与属性就需要把一个JavaScript中的DOM对象转换成jQuery对象。
转换方法一：
使用工厂方法jQuery(DOM对象)，如jQuery(document.getElementById("foo"))，是方法的简写形式，也可以写成是jQuery方法的简写形式，也可以写成(document.getElementById("foo"))
转换方法二：
简化形式jQuery(选择器)，如jQuery("#foo")，也可以写成$("#foo")
示例如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM转换成jQuery对象</title> </head> <body> <h2>DOM转换成jQuery对象</h2> <p id="foo">Foo</p> <p id="bar">Bar</p> <script type="text/javascript" src="js/jQuery/jquery.min.js" ></script> <script type="text/javascript"> //方法一 //在文档中获得id为foo的DOM对象 var foo=document.getElementById("foo"); //将DOM对象转换成jQuery对象 var $foo1=jQuery(foo); var $foo2=$(foo); //调用jQuery对象中的方法 $foo1.html("Foo jQuery");
$foo2.css("color","red"); //方法二 //获得文档中id为bar的DOM对象，将DOM包装成一个jQuery对象，调用jQuery方法html修改元素HTML jQuery("#bar").html("Bar jQuery"); //为id为bar的元素设置样式，将前景色修改为蓝色 $("#bar").css("color","blue"); </script> </body> </html>
运行结果：
2.4、jQuery对象转换成DOM对象
DOM对象是jQuery对象的组成部分，jQuery对象是对DOM对象的包装升级，每一个jQuery对象都是一个集合，是一个包装集，每个包装集中可以包含0到N个DOM元素。将jQuery对象转换成DOM对象方法如下
方法一：
jQuery对象[下标]
方法二：
jQuery对象.get(下标)
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery对象转换成DOM对象</title> </head> <body> <h2>jQuery对象转换成DOM对象</h2> <p id="foo">Foo</p> <p id="bar">Bar</p> <script type="text/javascript" src="js/jQuery/jquery.min.js" ></script> <script type="text/javascript"> //方法一 var $foo=$("#foo"); //从jQuery对象中获得下标为0的DOM元素，并调用DOM属性 $foo[0].innerHTML="foo DOM"; //方法二 var $p=$("p"); //从jQuery对象中获得下标为1的DOM元素，并调用DOM属性 $p.get(1).innerHTML="bar DOM"; </script> </body> </html>
运行结果：
2.5、DOM对象与jQuery对象区别
-
DOM对象只能调用DOM方法、属性与事件；
-
jQuery对象只能调用jQuery方法、属性与事件；
-
可以将DOM转换成jQuery对象，也可以将jQuery转换成DOM对象；
-
$只是jQuery的别名形式；
-
每一个jQuery对象都是一个DOM对象的集合
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery