jQueryとJavaScriptのノード作成方法の比較

1. ノードの作成:

DOM 仕様によれば、ノードは要素、属性、テキスト、ドキュメント、コメントを含む非常に幅広い概念です。しかし、実際の開発ではコンテンツを動的に作成するために、主な動作ノードには要素、属性、テキストが含まれます。

1. 要件: h1 タグを作成し、div 要素の子ノードとして DOM ノード ツリーに追加します。

2. 基本的な考え方は、まず h1 要素オブジェクトを作成し、それをドキュメントに追加することです。

3. 以下は 2 つの実装方法です:

// jQuery方式
var $h1 = $("<h1 title=&#39;创建节点&#39; class=&#39;head&#39;>jQuery与JavaScript创建节点比较</h1>");
$("div").append($h1);

//JavaScript方式
var div = document.getElementById("div1");
var h1 = document.createElement("h1");//创建h1对象
h1.setAttribute("title","创建节点");//为h1对象创建属性节点，并设置属性值
h1.setAttribute("class","head");//为h1对象成交价属性节点class，并设置属性值
var txt = document.createTextNode("jQuery与JavaScript创建节点比较");
h1.appendChild(txt);//将文本增加到元素节点中
div.appendChild(h1);//把创建的h1对象添加到div中

4. 2 つの方法の比較:

1) コード入力: jQuery は 2 行の簡単な操作で要素ノードを作成します。コードをすぐに実装できます。 JavaScript の実装は面倒です。ユーザーは要素ノードとテキスト ノードを別々に作成し、次に要素ノードにテキスト ノードを段階的に追加し、最後にそれらを DOM 構造ツリーに追加する必要があります。

2) 実行の観点からの分析: Safari ブラウザーでは、JavaScript 実装は jQuery 実装より 80 倍以上高速ですが、実行速度が最も遅い IE ブラウザーでは、2 つの間の差は 30 倍以上です。 10回