前言:

在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>')

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

  1. JavaScript的字符串、数组以及DOM操作总结

    (一)JavaScript字符串操作 JavaScript的字符串就是用' '或" "括起来的字符表示,日常的学习中有时候需要对字符串进行相关的操作.例如要获取字符串某个指定位置的 ...

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

    转自:https://blog.csdn.net/wmyasw/article/details/8686420 package com.mymhotel.opera; import java.io.F ...

  3. js学习笔记----JavaScript中DOM扩展的那些事

    什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...

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

    json数据在ajax实现异步交互时起到了很重要的作用,他可以返回请求的数据,然后利用客户端的js进行解析,这一点体现出js的强大,本文介绍JS解析json数据并将json字符串转化为数组的实现方法, ...

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

    数组与字符串的相互转化 <script type="text/javascript">var obj="new1abcdefg".replace(/ ...

  6. js 有关字符串的函数 以及一些和字符串有关的知识

    JS自带函数 concat 将两个或多个字符的文本组合起来,返回一个新的字符串. var a = "hello"; var b = ",world"; var ...

  7. 前端总结·基础篇·JS(一)五大数据类型之字符串(String)

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(二)补充 前端总结·基础篇·JS(一)五大数据类型之字符串(String) 目录 这是& ...

  8. 细看JS中的BOM、DOM对象

                                        DOM对象模型  DOM(Document Object Model),是指文档对象模型,是W3C组织推荐的处理可扩展标志语言的 ...

  9. JS学习四(BOM DOM)

    BOM                Screen对象 console.log(window.width);//屏幕宽度 console.log(window.height);//屏幕高度 conso ...

随机推荐

  1. 基于Struts2开发快递收发系统 毕业设计 源码

    基于Struts2开发快递收发系统 开发环境:  Windows操作系统 开发工具:Eclipse/MyEclipse+Jdk+Tomcat6+MySql数据库 运行效果图: 此源码经过详细测试 保证 ...

  2. java 添加到数据库的数据没有时分秒

    检查hibernate实体类的映射文件日期类型把date 改为 java.util.Date

  3. java 调用javascript

    首先我们在D盘的根目录下有一个js文件 名叫 common.js 假设里面有一个这样的方法 /** * @param int *            _number 你想要的最大值 * @param ...

  4. Android 开发权限设置中英对照说明详解

    android.permission.ACCESS_CHECKIN_PROPERTIES 允许读写访问 "properties"表在checkin数据库中,改值可以修改上传( Al ...

  5. Python【 模块】

    module模块:一个py文件就是一个模块 好处: 提高代码的可维护性 可重用 使用模块可以避免函数名和变量名冲突 分类: 标准库模块 第三方模块 自定义模块 调用方法: import 模块 # .p ...

  6. Metabase 从 H2 迁移到 MySQL 踩坑指南

    写在前面的话 首先如果你看到了这篇文章,可能你就已经指定 Metabase 是啥了,我这里还是简单的做个说明: Metabase is the easy, open source way for ev ...

  7. NVIDIA | 一种重建照片的 AI 图像技术

    简评:或许可以称之为「擦擦乐」~ 建议大家看看视频示例 ~ 前几天,NVIDIA 的研究人员介绍了一种新的 深度学习 方法,使用该方法可以重建缺失像素的图像内容. 这种方法被称为「image inpa ...

  8. python模块与包详解

    <1>.模块:任何  *.py 的文件都可以当作模块使用 import 导入 >>>improt test >>>b=test.a() >> ...

  9. loj2497 [PA2017]Banany(动态淀粉质)

    link 给定一棵树,点有点权,边有边权,你每次修改一个点点权或者是修改一个边边权 你一开始在1号点,你每次改节点之后你需要移动到另一个节点,满足这个节点权值减去路径长度最大(下一次从这个节点移动)如 ...

  10. 2016级算法第四次上机-E.Bamboo and the Ancient Spell

    Bamboo and the Ancient Spell 分析 可能英文读题难度比较大,但是只要看到全大写的 "THE LONGEST COMMON SUBSEQUENCE !"应 ...