HTML タグと DOM ノードの結合

今回はHTMLタグとDOMノードの組み合わせについてご紹介します。HTMLタグとDOMノードを組み合わせる際の注意事項について、実際の事例を見てみましょう。

最近、オープンソース フレームワークを 500 行作成しました。これには、jquery の一般的な機能のほとんどが含まれており、今後、多数のツール機能と MVVM 双方向ドライバー機能も拡張されます。使用方法は jquery とまったく同じです。なぜこれがこの記事のテーマと関係があるのでしょうか。この記事で説明するのは、フレームワークを作成する過程で遭遇した問題であるため、jquery の after メソッドがカプセル化されており、HTML タグは HTML を解釈する必要があります。 DOM 構造に DOM メソッドを挿入します。

まず、一般的な HTML タグを書きましょう:

これはテスト文字列です

この 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 にアセンブルするだけです。 説明のアイデアは明確なので、まず HTML タグの各部分を

正規表現

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

と照合する必要があります

さて、マッチングの結果は、写真の通りです

。 res[1] にはラベル名が格納されます。両側のスペースを削除するだけです

res[2]には属性と値を格納します。split関数を使ってスペースで1回切り、次にsplit関数を使って「=」で1回切り、分解します

。 res[4] は

string

の内容を保存します 上記の 3 つの部分については、ループと文字列処理を使用するだけで目的の結果が得られます

完全な処理コードは次のとおりです:

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

関数を自分でカプセル化することもできます。簡単にカプセル化できるはずです。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、 の他の関連記事に注目してください。 PHPの中国語サイトです！

推奨読書:

以上がHTML タグと DOM ノードの結合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。