[举一反三]使用javascript转换字符串为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]…

end

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

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

bBank 框架介绍：http://www.cnblogs.com/bruceli/archive/2010/04/15/bBank.html

转载于:https://www.cnblogs.com/bruceli/archive/2010/05/05/1727856.html

[举一反三]使用javascript转换字符串为dom对象（字符串动态创建dom）相关推荐

JS/Jquery遍历JSON对象、JSON数组、JSON数组字符串、JSON对象字符串
JS遍历JSON对象 JSON对象 var jsonObj = {"id": 102,"year": "2019-2020","l ...
【转载】ABAP中数据和对象的动态创建和调用
ABAP中数据和对象的动态创建和调用动态创建数据或者对象是指在程序运行过程中创建数据变量或者对象实例,我们可以用引用定义来创建数据变量,格式为: CREATE DATA gt_def TYPE ( ...
JavaScript学习（二十二）—动态创建表格
JavaScript学习(二十二)-动态创建表格效果如下: 代码如下: <!DOCTYPE html> <html lang="en"><head& ...
关于JObject的用法，以及实现动态生成实体对象、动态创建一些Josn组合
通过JObject和JArray创建JSON对象我们先用非常简单的方法来动态创建一些JSON,可通过JToken派生的JSON.NET对象来进行,最常见的JToken派生的类是JObject和JAr ...
html dom对象常用事件,HTML Dom Event对象onkeydown事件
语法: οnkeydοwn="SomeJavaScriptCode" onkeydown 事件会在用户按下一个键盘按键时发生, ie浏览器使用event.keyCode获取被按下的 ...
【黑马JS比较】用JavaScripts的DOM对象实现动态表格
案例: 在表格上可以实现添加和删除操作思路: 代码: html: <!DOCTYPE html> <html><head><title>动态表格< ...
jQuery Dom 操作，动态生成dom，绑定事件
1.获取内容 - text().html()以及val() text()-设置货返回所选的元素的文本内容:$("#text").text(); html()- 设置或返回所选元素的 ...
Jquery的动态创建DOM元素
jquery动态创建页面元素,mark一下,以备以后查询时使用.以创建div和input为例. 动态创建div: $(function(){ $("<div>",{ i ...
JQuery对象与DOM对象的区别与转换
1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj = ...

[举一反三]使用javascript转换字符串为dom对象（字符串动态创建dom）

[举一反三]使用javascript转换字符串为dom对象（字符串动态创建dom）相关推荐

最新文章

热门文章