javascript中html字符串转化为jquery dom对象的方法_html字符型转化为dom对象_风神修罗使的博客

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

月球上的西红柿 · C#调用C++和opencv生成的dll库文 ...· 8 月前 ·

坚强的大象 · python_字典列表嵌套的排序问题-腾讯云 ...· 1 年前 ·

千杯不醉的生菜 · Mysql中Json相关的函数使用_Mysq ...· 1 年前 ·

非常酷的黄豆 · 使用select2实现多选select下拉框 ...· 1 年前 ·

高兴的板栗 · Range 对象 (Excel) | ...· 2 年前 ·

最近在开发百度地图相关的一个应用，需要从硬编码的 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内容以字符串的形式输出，结果如下： 
<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>
说明了，$(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对象
转换后，就可以任意使用jQuery的方法了。 
通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。
var htmlText = '<div id="demo"><span class="sonSpan"></span></div>'；
2、下面使用Jquery库将htmlText 字符串变量转为Jquery对象。
$(htmlText)
$(htmlText)就是htmlText 字符串转为了一个Jquery对象
3、将该Jquery对象返回元素内容：
console.log($(htmlText).html())
                                    jquery.datetime
 jquery.datetime是一个jquery插件，它使用HTML或DOM元素中的简单嵌入式ISO8601日期自动呈现人类可读的日期时间。
 库自然确定时间是最近的还是将来足够近的时间以使用相对时间，例如“ 3分钟前”或“从现在开始4分钟”。 除此之外，它使用启发式方法仅显示相对应的尽可能多的信息。 例如，在同一天，它会显示时间，而不会显示日期，例如“ 2:45 pm”。 在同一周的其他日期，它将显示日期和时间，但不显示日期，例如“星期一下午4:55”。 除了这些时间刻度之外，它还仅显示日期，并且不打扰时间，并且仅在相关时显示年份。
这个项目的灵感来自于 ，由Ryan McGeary写的。
只需在HTML中使用abbr或time元素以及适当的datetime字符串（例如ISO8601）即可。
 <abbr title="2011-05-13T
                                    super_gross_javascript
 这是一个配对编程作业，我们得到以下指示：
 “好吧，所以您需要做些什么。在DOM上创建一个读取“ Generate”的按钮。页面加载后，您需要将三个不同的JSON文件发送给客户端。generate按钮必须在所有这三个按钮都起作用之后才能工作从服务器接收到的JSON片段。
 清单1应该是“修饰形容词”，例如：“超级”，“真正”清单2应该是形容词，例如“ Lame”，“无聊”清单3应该是我们涵盖的任何主题，“数组”， “对象”，“构建自动化”
 单击生成按钮后，在每个数组上选择一个随机点，并构造一个字符串，然后将其附加到DOM。 如果再次单击“生成”按钮，则应删除旧字符串，并替换一个新字符串。
                                    将HTML字符转换为DOM节点并动态添加到文档中将字符串动态转换为DOM节点，在开发中经常遇到，尤其在模板引擎中更是不可或缺的技术。字符串转换为DOM节点本身并不难，本篇文章主要涉及两个主题：1 字符串转换为HTML DOM节点的基本方法及性能测试2 动态生成的DOM节点添加到文档中的方法及性能测试本文的示例： 有如下代码段Document复制代码任务是编写一个JavaScript函数，接收一个文...
                                    # Intro有一天我在写爬虫。其实也说不上是爬虫，就是打开浏览器上网，觉得页面有些数据挺有意思，就打开开发者工具，在 Network/Console 中通过 javascript 原生的 fetch 方法 批量、自动地请求一些web资源。其中有一个关节，是以下的需求：有一些字符串格式的HTML源码，需要将其转换为 document 对象(DOM对象)，这样我就可以在 console 直接使用选择器(selector)对该HTML文档的文本内容进行过滤清洗处理。
                                    js字符串转换为对象格式，一般都会想到JSON.parse()，但数据不是标准的 JSON 格式的时候会解析出错，这时候就可以使用eval() 函数、new Function()方法来转换。
                                    当需要将一个网页解析成比较直观的dom树形式，有以下几种方法。(1)MSHTML中提供的IWebBrowser2接口。输入为网页的url；IHTMLDocument2 *pDoc = NULL;CoInitialize(NULL);//取得网页内容IWebBrowser2*pWebBrowser = NULL;HRESULT hr = CoCreateInstance(CLSID_Interne...
                                    例子如下：varjsonStr='{"name":"张三","hello":"world"}';/*开始转化*/varjsonObject=eval('('+jsonStr+')');alert(jsonObject.name);//当然如果使用jquery那就更简单了varjsonObject=$.parseJSON(jsonStr);但是如果遇到错误，比如说我们指定了一个...
                                    什么是DOM？需要我们要站在浏览器的角度来思考。????DOM (Document Object Model) 文档对象模型，是 HTML 和 XML 文档的编程接口。HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM是接口，HTML是标记语言。节点在HTML 文档中的所有内容都是节点：整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素内的文本是文本节点每个 HTML ...
                                    前一段时间因为需求，所以把这方面的资料自己查询规整了一下，以备后用。 DOMParser 对于开发者来说，我们"期盼"的最好的方式当然是原生的浏览器支持，就像下面这样   1: var parser = new DOMParser(); 2: var doc = parser.parseFromString("<input />", "text/html");  .csharpcode...

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

什么是`jQuery`对象？

`jQuery`对象转成`DOM`对象：

`DOM`对象转成`jQuery`对象: