javascript如何實作字串動態建立dom實例詳解

在javascript裡面動態創建標準dom物件一般使用： 

var obj = document.createElement('p');

然後再給obj設定一些屬性。
但是，在實際使用過程中，有些人可能會想，如果能這樣創建標準的dom物件就好了
偽代碼：var obj=strToDom('

Hello World!

');
那麼今天的目的就是教大家怎麼去實現一個這樣的方法用來把字符串直接轉換為標準的dom對象

start：
其實實作這樣的一個轉換是很簡單的，這裡主要是利用了一個屬性innerHTML.
innerHTML，我相信大家都使用過，特別是動態往一個元素裡面插入內容時使用，這裡還是在介紹下innerHTML，方便還不太熟悉的人。
innerHTML不是w3c標準，是由ie發明創造出來的，但是由於這個屬性的方便性，和當時微老大的地位，其它非ie瀏覽器也內置了innerHTML並給出了支持。
雖然innerHTML不是w3c標準，但卻是一個事實標準，這個事實標準很重要，也就是目前主流瀏覽器都支援innerHTML，自然就做到了相容多瀏覽器。

function parseDom(arg) { 
　　 var objE = document.createElement("p"); 
　　 objE.innerHTML = arg; 
　　 return objE.childNodes; 
};

短短幾行程式碼就實現了轉換，我們先用標準的方法創建一個p出來，在用innerHTML來插入一個元素，其實也就是利用瀏覽器自己的核心演算法來實現的一個轉換。在用childNodes返回出來。
這樣我們就完成了一個字串到標準dom的轉換，巧妙的利用瀏覽器本身的演算法，可以用簡單少量的程式碼來完成大量複雜的轉換，我們不用去解析字串，而是交給瀏覽器自己來完成，這樣既準確又無誤。
使用： 

var obj=parseDom(&#39;<p id="p_1" class="p1">Hello World!</p>&#39;); 
var obj=parseDom(&#39;<p id="p_1" class="p1">Hello World!</p><span>多个也没关系</span>&#39;);

注意：
childNodes回傳的是一個類似陣列的list。所以如果是元素，要使用這個dom就需要這樣使用obj[0]。如果是多個同等級的dom轉換，可以這樣使用obj[0]、obj[1]…

#

以上是javascript如何實作字串動態建立dom實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！