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] は

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

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

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

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

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

推奨読書:

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