1. ノードの作成:
DOM 仕様によれば、ノードは要素、属性、テキスト、ドキュメント、コメントを含む非常に幅広い概念です。しかし、実際の開発ではコンテンツを動的に作成するために、主な動作ノードには要素、属性、テキストが含まれます。
1. 要件: h1 タグを作成し、div 要素の子ノードとして DOM ノード ツリーに追加します。
2. 基本的な考え方は、まず h1 要素オブジェクトを作成し、それをドキュメントに追加することです。
3. 以下は 2 つの実装方法です:
// jQuery方式 var $h1 = $("<h1 title='创建节点' class='head'>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回