javascript中html字符串转化为jquery dom对象的方法

「爱情、让人受尽委屈。」 2021-06-26 16:06 307阅读 0赞

最近在开发百度地图相关的一个应用，需要从硬编码的`html`字符串中提取自己想要的元素以及属性信息。但是在`js`中或者`jQuery`中操作元素节点以及属性都是使用`DOM`对象或者`jquery`对象。下面将介绍如何把`html`字符串转为`Jquery`对象或者`DOM`对象。

原`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`内容以字符串的形式输出，结果如下：

说明了，`$(text)` `Jquery`对象代表的是最外层的`html`元素`div`。

**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`对象也不能使用。所以在必须要的时候可以进行相互转换。

**3、使用`js`代码将`text`字符串变量转为`DOM`对象。**  
js代码如下：

/*字符串转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);
    }

其中`js`代码将`text`字符串转为`DOM`对象与浏览器有关，所以。。。。。。分开写。　　  
这样就实现了`html`字符串向`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`对象：`[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`对象，只需要用`$()`把`DOM`对象包装起来，就可以获得一个`jQuery`对象了。`$(DOM对象)`

如：

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