JavaScript が文字列を使用して DOM インスタンスを動的に作成する方法の詳細な説明-jsチュートリアル-php.cn

JavaScript が文字列を使用して DOM インスタンスを動的に作成する方法の詳細な説明

伊谢尔伦

リリース： 2017-07-18 16:16:55

オリジナル

1655 人が閲覧しました

JavaScript で標準の dom オブジェクトを動的に作成するには、通常次のコマンドを使用します:

var obj = document.createElement(&#39;p&#39;);

ログイン後にコピー

次に、obj のプロパティをいくつか設定します。
しかし、実際に使ってみると、このように標準の dom オブジェクトが作成できればいいのに、と思う人もいるかもしれません
疑似コード: var obj=strToDom('

'); それでは、今日の目的は、文字列を標準 DOM オブジェクトに直接変換するメソッドを実装する方法を説明することです

開始:
実際には、これここでは、主に innerHTML 属性を使用します。特に、コンテンツを要素に動的に挿入する場合に使用したことがあると思います。 InnerHTML は w3c 標準ではなく、IE によって考案および作成されました。ただし、この属性の利便性と当時のマイクロボスの状況により、他の非 IE ブラウザーにも innerHTML が組み込まれており、サポートが提供されています。
innerHTML は w3c 標準ではありませんが、事実上の標準です。つまり、現在主流のすべてのブラウザーが innerHTML をサポートしているため、当然複数のブラウザーと互換性があります。

function parseDom(arg) { 
　　 var objE = document.createElement("p"); 
　　 objE.innerHTML = arg; 
　　 return objE.childNodes; 
};

ログイン後にコピー

この変換は、最初に標準的な方法を使用して p を作成し、次に innerHTML を使用して要素を挿入することで実現されます。実際、これはブラウザー独自のカーネルアルゴリズムを使用して実現されます。。 childNodes を使用して返します。

このようにして、ブラウザー独自のアルゴリズムを巧みに使用することで、文字列を標準 DOM に変換することができ、単純かつ少量のコードで多数の複雑な変換を完了できます。文字列を使用しますが、正確でエラーのないようにブラウザーに任せてください。

使用:

var obj=parseDom(&#39;<p id="p_1" class="p1">Hello World!</p>&#39;); 
var obj=parseDom(&#39;<p id="p_1" class="p1">Hello World!</p><span>多个也没关系</span>&#39;);

ログイン後にコピー

注: childNodes は配列のようなリストを返します。したがって、それが要素の場合、この dom を使用するには、次のように obj[0] を使用する必要があります。同じレベルでの複数の DOM 変換の場合は、obj[0]、obj[1]... を使用できます

以上がJavaScript が文字列を使用して DOM インスタンスを動的に作成する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。