javascript转换字符串为dom对象(字符串动态创建dom)

 更新时间:2010年05月10日 18:24:17   作者:  
那么今天的目的就是教大家怎么去实现一个这样的方法用来把字符串直接转换为标准的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 开源Javascript框架

相关文章

  • JavaScript获取一个范围内日期的方法

    JavaScript获取一个范围内日期的方法

    这篇文章主要介绍了JavaScript获取一个范围内日期的方法,涉及javascript操作日期的相关技巧,需要的朋友可以参考下
    2015-04-04
  • JScript的条件编译

    JScript的条件编译

    JScript的条件编译...
    2007-05-05
  • Javascript中的作用域及块级作用域

    Javascript中的作用域及块级作用域

    作用域永远都是任何一门编程语言中的重中之重,因为它控制着变量与参数的可见性与生命周期。下面给大家介绍Javascript中的作用域及块级作用域,需要的朋友参考下吧
    2017-12-12
  • JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)

    JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)

    这篇文章主要介绍了JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)的相关资料,需要的朋友可以参考下
    2016-06-06
  • javascript利用控件对windows的操作实现原理与应用

    javascript利用控件对windows的操作实现原理与应用

    假如要发送汉字的聊天框的内容的话,我们也要从windows消息机制下手,先找到聊天消息的句柄(可以利用findwindow函数或者用spy工具哈),然后在找到上面的聊天框的句柄,接着我们就可以想这个句柄发送WM_SETTEXT的消息了
    2012-12-12
  • Javascript 阻止浏览器默认操作的实现代码

    Javascript 阻止浏览器默认操作的实现代码

    在浏览器事件中,会触发一些默认动作,比如:点击一个链接时,执行完捕获/冒泡动作后,会触发链接的默认事件:跳转到指定链接地址。
    2009-09-09
  • BootStrap智能表单实战系列(七)验证的支持

    BootStrap智能表单实战系列(七)验证的支持

    这篇文章主要介绍了BootStrap智能表单实战系列(七)验证的支持 ,凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题,本文介绍非常详细,具有参考价值,需要的朋友可以参考下
    2016-06-06
  • 解决webpack无法通过IP地址访问localhost的问题

    解决webpack无法通过IP地址访问localhost的问题

    下面小编就为大家分享一篇解决webpack无法通过IP地址访问localhost的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 浅谈webpack下的AOP式无侵入注入

    浅谈webpack下的AOP式无侵入注入

    下面小编就为大家带来一篇浅谈webpack下的AOP式无侵入注入。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • javascript 常用验证函数总结

    javascript 常用验证函数总结

    随着做项目数量的越来越越多,其中用到js的地方很多相同,这里自己整理了一些常用表单验证的js方法,虽然和其他js验证框架有一定的差距,但是毕竟是自己总结的一些东西,在此与纪录分享一下。
    2016-06-06

最新评论