js 字符串转dom 和dom 转字符串

js 字符串转dom 和dom 转字符串

前言:

在javascript里面动态创建标准dom对象一般使用:

var obj = document.createElement(‘div‘);

然后再给obj设置一些属性。

但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了

伪代码:var obj=strToDom(‘<div id="div_1" class="div1">Hello World!</div>‘);

那么今天的目的就是教大家怎么去实现一个这样的方法用来把字符串直接转换为标准的dom对象

start:

其实实现这样的一个转换是很简单的,这里主要是利用了一个属性innerHTML.

innerHTML,我相信大家都使用过,特别是动态往一个元素里面插内容时使用,这里我还是在介绍下innerHTML,方便于还不太熟悉的人。

innerHTML不是w3c标准,是由ie发明创造出来的,但是由于这个属性的方便性,和当时微老大的地位,其它非ie浏览器也内置了innerHTML并给出了支持。

虽然innerHTML不是w3c标准,但是却是一个事实标准,这个事实标准很重要,也就是目前主流浏览器都支持innerHTML,自然就做到了兼容多浏览器。

code:

function parseDom(arg) {

   var objE = document.createElement("div");

   objE.innerHTML = arg;

   return objE.childNodes;

};

短短几行代码就实现了转换,我们首先用标准的方法创建一个div出来,在用innerHTML来插入一个元素,其实也就是利用浏览器自己的内核算法来实现的一个转换。在用childNodes返回出来。

这样我们就完成了一个字符串到标准dom的转换,巧妙的利用浏览器本身的算法,可以用简单少量的代码来完成大量复杂的转换,我们不用去解析字符串,而是交给浏览器自己来完成,这样既准确又无误。

使用:

var obj=parseDom(‘<div id="div_1" class="div1">Hello World!</div>‘);

var obj=parseDom(‘<div id="div_1" class="div1">Hello World!</div><span>多个也没关系</span>‘);

注意:

childNodes返回的是一个类似数组的list。所以如果是一个元素,要使用这个dom需要这样使用obj[0]。如果是多个同级的dom转换,可以这样使用obj[0]、obj[1]…

dom 转字符串更简单,可以使用三方类库实现

jquery 中提供的有dom 转字符串的方法 var domStr= $("#").html();

转换原理大家可以参考一下源代码,估计应该是采用深度遍历的方式返回拼接字符串

end

到这里就结束了,在这里向大家推荐一个我自己写的js框架,上面的这个方法集成在框架里面了

使用:b$.parseDom(‘<div id="div_1" class="div1">Hello World!</div>‘)

转自:http://zha-zi.iteye.com/blog/1931474

原文地址:https://www.cnblogs.com/oklfx/p/9374485.html

时间: 2024-10-01 00:28:51

js 字符串转dom 和dom 转字符串的相关文章

org.w3c.dom document 和xml 字符串 互转

转自:https://blog.csdn.net/wmyasw/article/details/8686420 package com.mymhotel.opera; import java.io.File;import java.io.IOException;import java.io.InputStream;import java.io.StringReader;import java.io.StringWriter;import java.util.Properties; import

js最基础知识回顾3(字符串拼接,数据类型,变量类型,变量作用域和闭包,运算符,流程控制,)

一.javaScript组成     1.ECMAScript:解释器.翻译 ---------------------------------------------------------几乎没有兼容性问题     2.DOM:Document Object Model --------操作HTML的能力----document--------有一些兼容性问题     3.BOM:Browser Object Model -------------浏览器---------------wind

JS学习四(BOM DOM)

BOM                Screen对象 console.log(window.width);//屏幕宽度 console.log(window.height);//屏幕高度 console.log(window.availWidth);//屏幕可用宽度 console.log(window.availHeight);//屏幕可用宽度 ★  location对象 取到浏览器的URL地址信息: 完整的URL路径: 协议名://主机名(IP地址):端口号/文件所在路径?传递参数(nam

js数组的操作及数组与字符串的相互转化

数组与字符串的相互转化 <script type="text/javascript">var obj="new1abcdefg".replace(/(.)(?=[^$])/g,"$1,").split(",");       //字符串转化为数组 var obj2 = "new2abcdefg".split("");                              

JS解析json数据并将json字符串转化为数组的实现方法

json数据在ajax实现异步交互时起到了很重要的作用,他可以返回请求的数据,然后利用客户端的js进行解析,这一点体现出js的强大,本文介绍JS解析json数据并将json字符串转化为数组的实现方法,需要了解的朋友可以参考下 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document

IE下js报错 SCRIPT1028: 缺少标识符、字符串或数字

今天一个jqueryUI的插件代码在IE下不能正常运行,调试了下,不是插件的问题. 这个错误原因一般都是多了个逗号括号什么的,IE检车的比较严格. 解决办法就是小心不要写多余的逗号括号什么的,或者不用IE(...) 报错代码如下: $("#postForm").validate({ rules : { title : "required", content : { required : true<span style="color:#ff0000;&

JS json字符串转对象、对象转字符串

JSON是javascript原生格式,在JavaScript中处理json数据不需要任何特殊的API或者工具包. JSON中,有两种结构:对象和数组. 在数据传输流中,json是以文本,即字符串的形式传递的,而JS操作的是json对象,因此,json对象和json字符串之间的互相转换关系是关键. 一.json字符串转json对象 1.json字符串转json对象 var str = '{"a":"a1","b":"b1"}'

[Cycle.js] Read effects from the DOM: click events

So far we only had effects that write something to the external world, we are not yet reading anything from the external world into our app. This lesson shows how we can change the DOM Driver to return a "DOM Source" representing read effects, s

原创-整理了下常用的js数组 、对象、数字、字符串的操作方法

终于整理好了...主要是一些常用的函数,包含es6和es5的所有常用的,吧一些不常用的全部砍掉,省的大家看的费事.发现这个到博客上面有点乱.给个百度云地址:https://pan.baidu.com/s/1MwMdW5P8IOoyGRYUQ2dBtQ 直接下就可以 字符串方法 : es6 include 返回布尔值,表示是否找到了参数字符串. 第二个参数表示开始搜索位置 startsWith 返回布尔值,表示参数字符串是否在原字符串的头部. 第二个参数表示开始搜索位置 endsWith 返回布尔