HTML標籤與DOM節點結合

這次帶給大家HTML標籤與DOM節點結合，HTML標籤與DOM節點結合的注意事項有哪些，下面就是實戰案例，一起來看一下。

最近在封裝一個開源框架，已經寫了500行， 已經具備jquery的大多數常用功能，後面還會擴展大量的工具函數和MVVM雙向驅動等功能。跟jquery的使用方法完全一樣，jquery的選擇器，幾乎都能支持，為什麼說這事，跟這篇文章的主題有毛關係呢？因為這篇文章要講的就是我在寫框架過程中碰到的一個問題，封裝jquery的after方法，支持DOM和html標籤兩種用法，html標籤傳參，我要把html解釋成DOM結構，用DOM的方法插入.

首先，我們寫個通用的html標籤:

#

this is a test string

# 這個html包含了事件，樣式，屬性，內容.

我們接著用正規把這個html的每個部分配對出來，我們需要的是：

1.標籤名， 因為建立dom節點的時候需要

2.屬性和內容都要單獨分離出來

# 為了方便創建dom,我們用一個json保存，例如這個標籤，我們要處理成的最終結果是:

{
id:"test
inner:"this is a test string
name:"test"
onclick:"test();"
style:"color:red;background:green;"
tag:"p"
}

如果有了這個結構，只要拿到對應的鍵和值，組裝成一個dom就可以搞定了

var o = document.createElement( obj['tag'] );
  o.innerHTML = obj['inner'];
  delete obj['inner'];
  delete obj['tag'];
  for( var key in obj ){
   o.setAttribute( key, obj[key] );
  } 
  document.body.appendChild( o );

解釋思路已經明確，那麼我們先要把html標籤的每部分用正規表示式配對出來

var re = /(.*)?/;
  var str = '<p>this is a test string</p>';
  var res = str.match(re);

# 恩，這就是我們配對出來的結果，從圖中可以看出，

res[1]儲存的是標籤名稱，只需要把兩邊的空格去掉

# res[2]儲存的是屬性和值，我們用split函數按空格切割一次，再用split函數按'='切割一次，就能分解出來了

res[4]儲存的就是字串的內容

# 上面3部分，只要用循環和字串稍加處理就可以得到目標結果了

# 那麼完整的處理程式碼就是：

var re = /(.*)?/;
  var str = '<p>this is a test string</p>';
  var res = str.match(re);
  var tagName = null, attrList = [], arr = [], obj = {};
  if( res[1] ) {
   tagName = res[1].trim();
   obj['tag'] = tagName;
  }
  if( res[4] ) {
   obj['inner'] = res[4];
  }
  if ( res[2] ) {
   attrList = res[2].split( /\s+/ );
   for( var i = 0, len = attrList.length; i 
#
可以自行封裝一個函數，我相信你應該輕易就能封裝出來吧.
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ 
推薦閱讀：


#

以上是HTML標籤與DOM節點結合的詳細內容。更多資訊請關注PHP中文網其他相關文章！