JavaScript中HTML字符串转换为jQuery与DOM对象的方法

HTML字符串转换为jQuery对象

原始HTML字符串定义如下：

var text="<div id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>"
        + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>"
        + "</div>";

1、利用JQuery库将text字符串变量转换为JQuery对象。

JQuery相关代码如下：

　　alert($(text).html());

其中$(text)将text字符串转换为一个JQuery对象，最后通过该JQuery对象的html()方法将HTML内容以字符串形式输出，结果如下：

<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>

这表明，$(text)生成的JQuery对象代表的是最外层的HTML元素div。

jQuery对象与DOM对象互转

2、实现JQuery对象与DOM对象之间的相互转换。

转换代码如下：

var element= $(text).get(0) //element就是一个dom对象
　　var jqueryobj=$(element);//jqueryobj就是一个Jquery对象。

注意：区分DOM对象和JQuery对象的区别

个人理解，JQuery对象和DOM对象都是对HTML元素的封装，便于对HTML元素节点进行操作，从而简化编程。然而，它们之间的方法并非完全通用，例如JQuery对象的html()方法，DOM对象无法直接使用；而DOM对象的GetElementById()方法，JQuery对象也无法调用。因此在必要时需要进行相互转换。

HTML字符串转换为DOM对象

3、使用JavaScript代码将text字符串变量转换为DOM对象。

JavaScript相关代码如下：

/*字符串转dom对象*/
function loadXMLString(txt) 
{
  try //Internet Explorer
   {
     xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
     xmlDoc.async="false";
     xmlDoc.loadXML(txt);
     //alert('IE');
     return(xmlDoc); 
   }
  catch(e)
   {
     try //Firefox, Mozilla, Opera, etc.
      {
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(txt,"text/xml");
       //alert('FMO');
        return(xmlDoc);
      }
     catch(e) {alert(e.message)}
   }
  return(null);
}

其中JavaScript代码将text字符串转换为DOM对象，由于不同浏览器的实现存在差异，因此需要分开处理。

至此，实现了HTML字符串向JQuery对象和DOM对象的转换。

jQuery对象与DOM对象概念辨析

jQuery对象与DOM对象相互转换方法介绍

刚开始学习jQuery时，可能一时难以区分哪些是jQuery对象，哪些是DOM对象。至于DOM对象，我们接触较多，此处不再赘述，下面重点介绍jQuery，以及两者之间的相互转换。

什么是jQuery对象？

---即通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，可以使用jQuery中的方法。

例如：

$("#test").html() 表示：获取ID为test的元素内的HTML代码。其中html()是jQuery中的方法

这段代码等同于使用DOM实现的代码：

document.getElementById("id").innerHTML; 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。乱使用会报错。例如：$("#test").innerHTML、document.getElementById("id").html()等写法都是错误的。

还需要注意的是：使用#id作为选择器取得的是jQuery对象，而document.getElementById("id")得到的是DOM对象，这两者并不等价。请参见下文所述的两者间的转换。

既然jQuery有区别但也有联系，那么jQuery对象与DOM对象也可以相互转换。在两者转换前，首先我们给一个约定：如果获取的是 jQuery对象，那么我们在变量前面加上$，如：var $variab = jQuery对象；如果获取的是DOM对象，则与习惯普通一样：var variab = DOM对象；这么约定只是便于讲解与区别，实际使用中并不规定。

jQuery对象转DOM对象的方法

jQuery对象转成DOM对象：

两种转换方式将一个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)方法，得到相应的DOM对象

例如：

var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

DOM对象转jQuery对象的方法

DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

例如：

var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象

转换后，就可以任意使用jQuery的方法了。

通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。