在JS的脚本里,怎么把一个html字符串转成的DOM对象.从而能使用返回的DOM对象来访问某一个节点?

JavaScript015

在JS的脚本里,怎么把一个html字符串转成的DOM对象.从而能使用返回的DOM对象来访问某一个节点?,第1张

你的这个javascript脚本通常会在一个HTML页面里面运行。所以如果你的字符串里面没有<html>标签，直接就是内容<input type='text' value='123' id='test'>，那么可以通过doucment.createElement创建一个div，然后把这个div的innerHTML设置成你的字符串。再把这个div append到doucmnet下面人任何一个元素里（通常就是body元素），这样就可以document.getElementById来获取了。用完之后如果不需要了，再从dom tree里把这个元素移除掉，或者就把这个div设置为display="None"就好

但是如果这个字符串是完整的HTML，包括<html><head><body>等标签，那么就需要创建一个新的iframe，把这个iframe的innerHTML设置成你的字符串，然后通过iframe的document的getElementById来获取。

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

可以使用eval()方法。

eval函数接收一个参数s，如果s不是字符串，则直接返回s。否则执行s语句。如果s语句执行结果是一个值，则返回此值，否则返回undefined。

下面是具体用法：

var code1='"a" + 2'//表达式

var code2='{a:2}'//语句

alert(eval(code1))//->'a2'

alert(eval(code2))//->undefined

//json字符串使用eval('('+string+')')方法转换成js对象。

alert(eval('(' + code2 + ')'))//->[object object]转换成对象。