javascript轉(zhuǎn)換字符串為dom對(duì)象(字符串動(dòng)態(tài)創(chuàng)建dom)
更新時(shí)間:2010年05月10日 18:24:17 作者:
那么今天的目的就是教大家怎么去實(shí)現(xiàn)一個(gè)這樣的方法用來(lái)把字符串直接轉(zhuǎn)換為標(biāo)準(zhǔn)的dom對(duì)象
前言:
在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è)我自己寫的js框架,上面的這個(gè)方法集成在框架里面了
使用:b$.parseDom('<div id="div_1" class="div1">Hello World!</div>')
bBank 開(kāi)源Javascript框架
在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:
復(fù)制代碼 代碼如下:
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ú)誤。
使用:
復(fù)制代碼 代碼如下:
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è)我自己寫的js框架,上面的這個(gè)方法集成在框架里面了
使用:b$.parseDom('<div id="div_1" class="div1">Hello World!</div>')
bBank 開(kāi)源Javascript框架
您可能感興趣的文章:
- JavaScript動(dòng)態(tài)創(chuàng)建div屬性和樣式示例代碼
- javascript 動(dòng)態(tài)創(chuàng)建表格
- javascript動(dòng)態(tài)創(chuàng)建及刪除元素的方法
- JavaScript動(dòng)態(tài)創(chuàng)建link標(biāo)簽到head里的方法
- JavaScript實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建CSS樣式規(guī)則方案
- JavaScript與DOM組合動(dòng)態(tài)創(chuàng)建表格實(shí)例
- javascript 翻頁(yè)測(cè)試頁(yè)(動(dòng)態(tài)創(chuàng)建標(biāo)簽并自動(dòng)翻頁(yè))
- JavaScript 動(dòng)態(tài)創(chuàng)建VML的方法
- Javascript動(dòng)態(tài)創(chuàng)建div的方法
- javascript 動(dòng)態(tài)創(chuàng)建 Option選項(xiàng)
相關(guān)文章
代碼觸發(fā)js事件(click、change)示例應(yīng)用
Chrome , Firfox 不支持fireEvent的方法可以使用dispatchEvent的方法替代,直接給一個(gè)兼容的Code,下面有個(gè)不錯(cuò)的示例,喜歡的朋友可以收藏下2013-12-12TypeScript類型系統(tǒng)自定義數(shù)據(jù)類型教程示例
這篇文章主要為大家介紹了TypeScript類型系統(tǒng)自定義數(shù)據(jù)類型教程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之基本排序算法定義與效率比較【冒泡、選擇、插入排序】
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之基本排序算法定義與效率比較,結(jié)合實(shí)例形式詳細(xì)總結(jié)分析了javascript排序算法中的冒泡、選擇、插入等排序算法原理與操作技巧,需要的朋友可以參考下2019-02-02JavaScript 解決ajax中parsererror錯(cuò)誤案例詳解
這篇文章主要介紹了JavaScript 解決ajax中parsererror錯(cuò)誤案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08Javascript連接多個(gè)數(shù)組不用concat來(lái)解決
這篇文章主要介紹了不用concat解決Javascript連接多個(gè)數(shù)組,需要的朋友可以參考下2014-03-03