javascript轉換字符串為dom對象（字符串動態創建dom）

2024-05-06 14:10:07

字體：大中小

來源：轉載

供稿：網友

前言：
在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框架

上一篇：IE8下關于querySelectorAll()的問題

下一篇：JS 自定義函數缺省值的設置方法

學習交流

硬盤分區如何設置準確的分區空間

硬盤分區如何設置準確的分區空間...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注