HTML標簽如何解釋成DOM節(jié)點

這篇文章主要介紹了HTML標簽如何解釋成DOM節(jié)點，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

<div onclick="test();" name="test" id="test">this is a test string</div>

這個html包括了事件，樣式，屬性，內(nèi)容.

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

1、標簽名， 因為創(chuàng)建dom節(jié)點的時候需要

2、屬性和內(nèi)容都要單獨分離出來

為了便于創(chuàng)建dom,我們用一個json保存，比如這個標簽，我們要處理成的最終結果是:

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

如果有了這個結構，只要拿到對應的鍵和值，組裝成一個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 );

解釋思路已經(jīng)明確，那么我們首先就要把html標簽的每部分用正則表達式匹配出來

var re = /<(\w+\s*)(\w+[=][\'\"](.*)?[\'\"]\s*)*>(.*)?<\/\w+>/;
  var str = '<div onclick="test();" name="test" id="test">this is a test string</div>';
  var res = str.match(re);

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

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

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

res[4]存儲的就是字符串的內(nèi)容

上面3部分，只要用循環(huán)和字符串稍加處理就可以得出目標結果了

那么完整的處理代碼就是：

var re = /<(\w+\s*)(\w+[=][\'\"](.*)?[\'\"]\s*)*>(.*)?<\/\w+>/;
  var str = '<div onclick="test();" name="test" id="test">this is a test string</div>';
  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 < len; i++ ){
    arr = attrList[i].split("=");
    // console.log( arr );
    obj[arr[0]] = arr[1].replace( /(^[\'\"]+|[\'\"]$)/g, function(){
     return '';
    } );
   }
  }

  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 );

可以自行封裝一個函數(shù)，我相信你應該輕易就能封裝出來吧.

感謝你能夠認真閱讀完這篇文章，希望小編分享的“HTML標簽如何解釋成DOM節(jié)點”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!