2017-02-18 7 views
3

私はhtmlとjavascriptを把握しようとしていて、document.createElement(some_tag)<some tag></some tag>の機能上の違いがあるかどうか疑問に思っています。私はjavascriptのcreate要素を使用すると、(コピーして貼り付けたり、コードをかさばったりするのではなく)ウェブサイトのさまざまなページ/セクションで特定の要素を何度も繰り返し作成することが容易になるかもしれません。しかし、メモリや何かがcreate要素を使うのは悪い習慣/悪いことです。例えばhtmlタグとjavascript要素を使用して

、次のコードを考えてみます。

function createhtml() { 
 
    var li1 = document.createElement("li"); 
 
    var text1 = document.createTextNode("First List Item"); 
 
    li1.appendChild(text1); 
 
    var ul1 = document.createElement("ul"); 
 
    ul1.appendChild(li1); 
 
    document.body.appendChild(ul1); 
 

 
}
<body onload="createhtml()"> 
 
</body>

を、それはそれを行うには良い、または単純です:

<ul> 
 
    <li>First List Item </li> 
 
</ul>

それともそれらはまったく同じものであり、第2のものはちょっと簡単です。

+0

createElementを使用してノードごとにHTMLを記述することで、パフォーマンス上の利点はありません。まだ気づいていない場合は、書くのがはるかに面倒です。 –

+0

DOMとの最大の違いは次のとおりです。コードを実行するとき、およびDOMが変更を認識するようにcreateElement()などのものを使用する必要がある場合に応じて、 JavaScriptを使い始めるにつれ、何かに取り組むが、DOMツリーにはそれが認識されないので失敗するようなコードが出てくる可能性があります。また、DOMに似た静脈にあるイベントのバブリングを調べます。 – Blizzardengle

答えて

0

HTMLを入力すると、ページが読み込まれ、リストが表示されます。

JavaScriptバージョンの場合、ページが読み込まれ、スクリプトが解析されて実行され、リストが表示されます。

これは非常に簡単な例ですが、ストレートHTMLはやや性能が向上し、静的コンテンツの場合ははるかにメンテナンス可能です。

0

私は物事を分けておくと、道に迷ってしまうことが分かりました。あなたのページのオブジェクトを定義することはあなたのHTMLの中に入ります。スタイリングとそれらの要素をアニメーション化することはあなたのCSSに入れて、物事はあなたのJavaScriptに入れなければなりません。もちろん、これは難しくて速いルールではありませんが、意図的に物事を分けておくことで、あなたが探しているものを読みやすく、見つけやすくなります。さらに、どの方法が高速であるかに応じて、事前にアセンブルされたHTMLは、jsで即座にアセンブルしようとするよりも高速にロードされます。

TLDR;可能な限りHTMLの要素を作成してください。

0

あなたのページ/ブラウザがします。

  • はJavaScriptを取りに行くとここにあなたの例では
  • ページに新しい要素を再描画

それを実行し、静的なHTML

  • を描きますこれはユーザーが気付かないような些細なことですが、大きなページでは問題を引き起こす可能性があります。 JavaScriptメソッドは、時間と処理効率の面でも効率が悪いです。

    一般的に言えば、ページが読み込まれた後に変更する可能性のあるものを生成する必要がある場合(JavaScriptを使用する場合)、読み込んだときに存在する状況他の場所からのもののリストを入手する)。静的/不変の素材はHTMLとして残されているほうが良い。

  • 0

    たとえば、静的なhtmlタグを使用する前に要素の数を知っている場合は、ボディに追加する時間とメモリが必要になるため、より良いオプションです。

    ここで、体に何個の要素が追加されるのかわからない場合は、domを使用する必要があります。 あなたは、開発者ツール "F12"のタイムラインで、あなたの要素が取る予定のパフォーマンスとメモリを見ることができます。