javascriptDOMプログラミングアートノートを勉強します知識点動的作成マーク

11199 ワード
JavaScript
伝統技術:document.writeとinners HTML
DOM方法を深く分析する:createelement、createText Node、apendChildとinsertBefore
 
7.1.1 document.write
documentオブジェクトのwriteメソッドは、すばやく文字列をドキュメントに挿入することができます.
Dcument.writeの最大の欠点は「行為は表現と切り離すべきだ」という原則に反することです.
1 document.write("<p>This is inserted.</p>");
 
7.1.2 innerHTML属性
innerHTML属性は、与えられた要素の中のHTMLコンテンツを読み、書きます.
1 window.onload = function(){

2  var testdiv = document.getElementById("testdiv");

3  alert(testdiv.innerHTML);

4 }
 
この技術を利用して、「HTMLコンテンツの一部を挿入する」と「HTMLコンテンツの一部を置換する」という区別ができません.testdiv要素の中にHTMLの内容があるかどうかは関係ありません.inners HTML属性を使ったら、その内容は全部入れ替えられます.
1 window.onload = function(){

2  var testdiv = document.getElementById("testdiv");

3  testdiv.innerHTML = "<p>I inserted <em>this</em> content.</p>";

4 }
innerHTML属性はdocument.writer()方法よりもオススメです.innerHTML属性を使うと、JavaScriptコードをマークから分離できます.マークの部分にタグを挿入する必要はありません.
 
 
7.2 DOM方法
DOMはドキュメントの表示です.DOMに含まれる情報は、ドキュメント内の情報と一対一に対応しています.正しい質問(正しい方法を使う)をマスターすれば、DOMノードツリー上の任意のノードの詳細を取得することができます.
DOMは二車線です.ドキュメントの内容だけを取得できます.文書の内容を更新することもできます.DOMノードツリーを改編すると、ドキュメントがブラウザに表示される効果が変わります.あなたはもうset Attributeの方法の不思議なところを見ました.この方法で、DOMノードツリー上のある属性ノードを変更できます.関連文書はブラウザ内の表示によって変化します.ただし、setAttributeメソッドは文書の物理的内容を変えていません.ブラウザではなくテキストエディタを使ってこの文書を開けば、何の変化も見られなくなります.ブラウザでそのドキュメントを開くときだけ、文書の効果の変化が見られます.これはブラウザが実際に表示しているのがそのDOMノードツリーだからです.ブラウザから見ると、DOMノードツリーはドキュメントである.
このことが分かりましたら、動的にマーカーを作成することができます.マークを作成しているのではなく、DOMノードツリーを変更しています.このようにするための鍵はDOMの視点から考えなければならない.
DOMでは、ドキュメントはノードツリーです.ノードツリーにコンテンツを追加するには、新しいノードを挿入する必要があります.ドキュメントにマークを追加するには、要素ノードを挿入する必要があります.
 
7.2.1 createElement方法
新しい要素を作成して、DOM方法でcreateElementを完成します.
1 document.createElement(nodename);
以下の文はp要素を作成します.
1 document.createElement("p");
この方法自体はページの表現に影響しません.また、新しく作成した要素をドキュメントに挿入する必要があります.そのためには、新しく作成されたノードを引用するものが必要です.
1 var para = document.creatElement("p");
変数paraは現在作成されたばかりのp元素への参照を含んでいます.今、この新しく作成されたp元素はすでに存在しましたが、それはまだいかなるDOMノードツリーの構成部分でもありません.JavaScript世界の孤児です.この場合はドキュメントの破片といい、ブラウザの画面には表示されません.しかし、それはすでに他のノードのように自分のDOM属性を持っています.
 
7.2.2 apendChild方法
新しく作成されたノードをドキュメントのノードツリーに挿入する最も簡単な方法は、この文書のある既存ノードのサブノードと呼ばれることである.
1 parent.appendChild(child)

2 var para = document.createElement("p");

3 var testdiv = document.getElementById("testdiv");

4 testdiv.appendChild(para);
 
7.2.3 createText Node方法
テキストノードを作成して、createText Node方法を使ってそれを実現してもいいです.createelement方法は要素ノードを作成します.
1 document.createTextNode(text)

2 document.createTextNode("Hello world");

3 var txt = document.createTextNode("Hello world");
変数txtは現在、新しく作成されたテキストノードへの参照を含んでいます.このテキストノードは、apendChild方法である既存の要素のサブノードに挿入することができる.このテキストノードを前のセクションで作成したp要素に挿入します.
1 window.onload = function(){

2     var para = document.createElement("p");

3     var testdiv = document.getElementById("testdiv");

4     testdiv.appendChild(para);

5     var txt = document.createTextNode("Hello world");

6     para.appendChild(txt);

7 }
この例は、以下の順序でノードを作成し、挿入するものである.
(1)p要素ノードを作成します.
(2)このp元素ノードをtest.htmlドキュメントの要素ノードに追加します.
(3)テキストノードを作成します.
(4)このテキストノードを先ほど作成したp要素ノードに追加します.
apendChild方法は、まだ文書ツリーの一部になっていないノードを接続するためにも使用され得る.つまり、以下の手順も目的を達成することができる.
(1)p要素ノードを作成します.
(2)テキストノードを作成します.
(3)このテキストノードを第1ステップで作成したp要素ノードに追加します.
(4)このp元素ノードをtest.htmlドキュメントの要素ノードに追加します.
次は新しい手順で作成した関数です.
1 window.onload = function(){

2     var para = document.createElement("p");

3     var txt = document.createTextNode("Hello world");

4     para.appendChild(txt);

5     var testdiv = document.getElementById("testdiv");

6     testdiv.appendChild(para);

7 }
 
7.2.4より複雑な組み合わせ
＜p＞This is＜em＞mycontent.


これらのHTMLコンテンツはp要素ノードに対応しており、それ自体はサブノードで構成されている.
テキストノードの内容は「This is」です.
一つの要素ノード「em」は、この要素ノード自体がテキストノードを含み、その内容は「my」である.
テキストノードの内容は「content.」である.
どのノードを作成する必要があるかを明らかにしてから、やるべきステップです.
  • はp要素ノードを作成し、変数paraに割り当てます.
  • はテキストノードを作成し、変数txt 1に割り当てます.
  • はtxt 1をパラに追加します.
  • は、em要素ノードを作成し、変数exphasisに割り当てます.
  • はテキストノードを作成し、変数txt 2に値を付与する.
  • はtxt 2をexphasisに追加します.
  • exphasisをパラに追加します.
  • はテキストノードを作成し、変数txt 3に値を与えます.
  • はtxt 3をparaに追加します.
  • パラをtest.htmlドキュメントのtestdiv要素に追加します.
    •  1 window.onload = function(){

 2     var para = document.createElement("p");

 3     var txt1 = document.createTextNode("This is ");

 4     para.appendChild(txt1);

 5     var emphasis = document.createElement("em");

 6     var txt2 = document.createTextNode("my");

 7     emphasis.appendChild(txt2);

 8     para.appendChild(emphasis);

 9     var txt3 = document.createTextNode(" content.");

10     para.appendChild(txt3);

11     var testdiv = document.getElementById("testdiv");

12     testdiv.appendChild(para);

13 }
     
    もう一つの考え:すべてのノードを作成してから、それらを接続してもいいです.
  • はp要素ノードを作成し、変数paraに値を付与する.
  • はテキストノードを作成し、変数txt 1に値を付与する.
  • は、em要素ノードを作成し、変数exphasisに値を与えます.
  • はテキストノードを作成し、変数txt 2に値を付与する.
  • はテキストノードを作成し、変数txt 3に値を与えます.
  • はtxt 1をパラに追加します.
  • はtxt 2をexphasisに追加します.
  • exphasisをパラに追加します.
  • はtxt 3をparaに追加します.
  • パラをtest.htmlドキュメントのtestdiv要素に追加します.
    •  1 window.onload = function (){

 2     var para = document.createElement("p");

 3     var txt1 = document.createTextNode("This is ");

 4     var emphasis = document.createElement("em");

 5     var txt2 = document.createTextNode("my");

 6     var txt3 = document.createTextNode(" content. ");

 7     para.appendChild(txt1);

 8     emphasis.appendChild(txt2);

 9     para.appendChild(emphasis);

10     para.appendChild(txt3);

11     var testdiv = document.getElementById("testdiv");

12     testdiv.appendChild(para);

13 }
    ES 6入門教程ノート(6)-関数の拡張