javascript轉(zhuǎn)換字符串為dom對(duì)象（字符串動(dòng)態(tài)創(chuàng)建dom）

2024-05-06 14:10:07

字體：大中小

供稿：網(wǎng)友

前言：
在javascript里面動(dòng)態(tài)創(chuàng)建標(biāo)準(zhǔn)dom對(duì)象一般使用：
var obj = document.createElement('div');
然后再給obj設(shè)置一些屬性。
但是，在實(shí)際使用過(guò)程中，有些人可能會(huì)想，要是能這樣創(chuàng)建標(biāo)準(zhǔn)的dom對(duì)象就好了
偽代碼：var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>');
那么今天的目的就是教大家怎么去實(shí)現(xiàn)一個(gè)這樣的方法用來(lái)把字符串直接轉(zhuǎn)換為標(biāo)準(zhǔn)的dom對(duì)象

start：
其實(shí)實(shí)現(xiàn)這樣的一個(gè)轉(zhuǎn)換是很簡(jiǎn)單的，這里主要是利用了一個(gè)屬性innerHTML.
innerHTML，我相信大家都使用過(guò)，特別是動(dòng)態(tài)往一個(gè)元素里面插內(nèi)容時(shí)使用，這里我還是在介紹下innerHTML，方便于還不太熟悉的人。
innerHTML不是w3c標(biāo)準(zhǔn)，是由ie發(fā)明創(chuàng)造出來(lái)的，但是由于這個(gè)屬性的方便性，和當(dāng)時(shí)微老大的地位，其它非ie瀏覽器也內(nèi)置了innerHTML并給出了支持。
雖然innerHTML不是w3c標(biāo)準(zhǔn)，但是卻是一個(gè)事實(shí)標(biāo)準(zhǔn)，這個(gè)事實(shí)標(biāo)準(zhǔn)很重要，也就是目前主流瀏覽器都支持innerHTML，自然就做到了兼容多瀏覽器。
code:
代碼如下:
function parseDom(arg) {
　　 var objE = document.createElement("div");
　　 objE.innerHTML = arg;
　　 return objE.childNodes;
};

短短幾行代碼就實(shí)現(xiàn)了轉(zhuǎn)換，我們首先用標(biāo)準(zhǔn)的方法創(chuàng)建一個(gè)div出來(lái)，在用innerHTML來(lái)插入一個(gè)元素，其實(shí)也就是利用瀏覽器自己的內(nèi)核算法來(lái)實(shí)現(xiàn)的一個(gè)轉(zhuǎn)換。在用childNodes返回出來(lái)。
這樣我們就完成了一個(gè)字符串到標(biāo)準(zhǔn)dom的轉(zhuǎn)換，巧妙的利用瀏覽器本身的算法，可以用簡(jiǎn)單少量的代碼來(lái)完成大量復(fù)雜的轉(zhuǎn)換，我們不用去解析字符串，而是交給瀏覽器自己來(lái)完成，這樣既準(zhǔn)確又無(wú)誤。
使用：
代碼如下:
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>多個(gè)也沒(méi)關(guān)系</span>');

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

到這里就結(jié)束了，在這里向大家推薦一個(gè)我自己寫(xiě)的js框架，上面的這個(gè)方法集成在框架里面了
使用：b$.parseDom('<div id="div_1" class="div1">Hello World!</div>')

bBank 開(kāi)源Javascript框架

上一篇：IE8下關(guān)于querySelectorAll()的問(wèn)題

下一篇：JS 自定義函數(shù)缺省值的設(shè)置方法