前言：

在javascript里面動態(tài)創(chuàng)建標(biāo)準(zhǔn)dom對象一般使用：

? var obj = document.createElement('div');

然后再給obj設(shè)置一些屬性。

但是，在實際使用過程中，有些人可能會想，要是能這樣創(chuàng)建標(biāo)準(zhǔn)的dom對象就好了

?偽代碼：var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>');

那么今天的目的就是教大家怎么去實現(xiàn)一個這樣的方法用來把字符串直接轉(zhuǎn)換為標(biāo)準(zhǔn)的dom對象

?

start：

其實實現(xiàn)這樣的一個轉(zhuǎn)換是很簡單的，這里主要是利用了一個屬性innerHTML.

innerHTML，我相信大家都使用過，特別是動態(tài)往一個元素里面插內(nèi)容時使用，這里我還是在介紹下innerHTML，方便于還不太熟悉的人。

innerHTML不是w3c標(biāo)準(zhǔn)，是由ie發(fā)明創(chuàng)造出來的，但是由于這個屬性的方便性，和當(dāng)時微老大的地位，其它非ie瀏覽器也內(nèi)置了innerHTML并給出了支持。

雖然innerHTML不是w3c標(biāo)準(zhǔn)，但是卻是一個事實標(biāo)準(zhǔn)，這個事實標(biāo)準(zhǔn)很重要，也就是目前主流瀏覽器都支持innerHTML，自然就做到了兼容多瀏覽器。

code:

?function parseDom(arg) {

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

　　?objE.innerHTML = arg;

　　?return objE.childNodes;

};

短短幾行代碼就實現(xiàn)了轉(zhuǎn)換，我們首先用標(biāo)準(zhǔn)的方法創(chuàng)建一個div出來，在用innerHTML來插入一個元素，其實也就是利用瀏覽器自己的內(nèi)核算法來實現(xiàn)的一個轉(zhuǎn)換。在用childNodes返回出來。

這樣我們就完成了一個字符串到標(biāo)準(zhǔn)dom的轉(zhuǎn)換，巧妙的利用瀏覽器本身的算法，可以用簡單少量的代碼來完成大量復(fù)雜的轉(zhuǎn)換，我們不用去解析字符串，而是交給瀏覽器自己來完成，這樣既準(zhǔn)確又無誤。

使用：

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>多個也沒關(guān)系</span>');

注意：

childNodes返回的是一個類似數(shù)組的list。所以如果是一個元素，要使用這個dom需要這樣使用obj[0]。如果是多個同級的dom轉(zhuǎn)換，可以這樣使用obj[0]、obj[1]…

end

?

到這里就結(jié)束了，在這里向大家推薦一個我自己寫的js框架，上面的這個方法集成在框架里面了

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

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

轉(zhuǎn)載于:https://www.cnblogs.com/bruceli/archive/2010/05/05/1727856.html

總結(jié)

以上是生活随笔為你收集整理的[举一反三]使用javascript转换字符串为dom对象（字符串动态创建dom）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。