js 字符串轉dom 和dom 轉字符串

js 字符串轉dom 和dom 轉字符串

前言：

在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]…

 

 

dom 轉字符串更簡單，可使用三方類庫實現

jquery 中提供的有dom 轉字符串的方法 var domStr= $("#").html();

轉換原理你們能夠參考一下源代碼，估計應該是採用深度遍歷的方式返回拼接字符串

end

 

到這裏就結束了，在這裏向你們推薦一個我本身寫的js框架，上面的這個方法集成在框架裏面了

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

 

轉自：http://zha-zi.iteye.com/blog/1931474