Javascript入門 第6回 js DOMプログラミング_基礎知識

前の記事で私が困惑した疑問は、この章と次の章で徐々に解決されます。 今日から DOM プログラミングを学び始めて、ゆっくりとジュニア JS プログラマーになりましょう。 その後、js 職人の方向に開発します。

英語を学びましょう:
Dom: ドキュメント オブジェクト モデル。ドキュメント オブジェクト モデル
Bom: ブラウザ オブジェクト モデル。
注: ウィンドウ オブジェクト モデルとも呼ばれます。 (ウィンドウ オブジェクト モデル。)
API: アプリケーション プログラミング インターフェイス。
注: DOM は実際には API とみなすことができます。
ノード: ノード。
注: ノードは、要素ノード、属性ノード、テキスト ノードに分かれています。
要素ノードには、属性ノードとテキスト ノードが含まれます。
Dom ツリー:
DOM の操作方法を直接見てみましょう。
1、要素ノードを作成します。 createElement():

Output; nodeType は 1. a.nodeName は p;
つまり、要素ノードが作成されます...なぜドキュメント内にノード p が見つかりませんか?
次の例を見てみましょう:


firebug で確認すると、ドキュメントに必要な結果がすでに含まれていることがわかります。


createElement() メソッドで作成された新しい要素ノードはドキュメントに自動的に追加されないことがわかります。ドキュメントには追加されないため、まだドキュメント内にあることになります。自由な状態。ドキュメントに追加する場合は、appendChild() メソッド、insertBefore() メソッド、または replaceChild() メソッド (後述) を使用できます。

2、テキストノードを作成します。 createTextNode():
var b = document.createTextNode("my demo");
alert( "ノードの種類: " b.nodeType " "、ノード名: " b.nodeName);
output ; NodeType is 3 . a.nodeName is #text ;
それで、テキスト ノードが作成されます...なぜこのテキスト ノードがドキュメント内に見つからないのか疑問に思うかもしれません。これは、appendChild() を使用してドキュメントに追加する必要がある createElement() と同じですか。

はい、あなたの考えはとても正しいです。
次の例を見てみましょう。




3, ノードをコピーします。 cloneNode(boolean): 1 つのパラメータ:




firebug の下の結果を見てください:


true と false の違いを参照してください。間違い。
true の場合:

hello world

クローンです。
false:

のみを複製し、内部のテキストは複製しません。
createElement() と同様に、クローン作成後の新しいノードはドキュメントに自動的に挿入されません。 AppendChild() は必須です。
別の注意: クローン作成後に ID が同じである場合は、setAttribute(“id”, “new_id “)
を使用して新しいノードの ID を変更することを忘れないでください。

4, ノードを挿入します。 appendChild():
これまでに何度か使ったことがあるので、一般的な使い方は知っているはずです。
具体的な説明は次のとおりです。
要素に子ノードを追加し、最後に新しいノードを挿入します。
var コンテナ = document.createElement("p");var t = document.createTextNode("cssrain");
container.appendChild(t);

さらに、appendChild() は新しい要素を追加するために使用されますが、ドキュメント内の既存の要素を移動することもできます。
以下の例を見てください:

msg

content

p id="aaa">aaaaaaaa

<script> <br>var mes = document.getElementById("msg"); <br>container.appendChild(mes); <br></script>
//コンテンツの後ろに msg が配置されていることがわかりました。
Js の内部処理方法:
まずドキュメントから ID msg のドキュメントを削除し、それをコンテンツに挿入し、コンテンツの最後のノードとして挿入します。
結果は次のようになります。

content

msg

aaaaaaaa

5、ノードを挿入します。 insertBefore():
名前が示すように、ターゲット ノードの前に新しいノードを挿入します。
Element.insertBefore( newNode , targeterNode );
// 最初のパラメーターが新しいノードで、その後にターゲット ノード (挿入位置) が続くことに注意してください。
// 新しいノードはゲストなので、最初に彼にサービスを提供する必要があります。 。 。 ^_^

2 番目のパラメータはオプションです。2 番目のパラメータが記述されていない場合、デフォルトでドキュメントの末尾に追加されます。これは appendChild(); と同等です。
その方法を見てみましょう。 insertBefore() を使用するには :

1111

msg

test

222

aaaaaaaa

< /p>
<script> <br>var msg = document.getElementById("aaa"); = document.getElementById( "cssrian"); <br>test.insertBefore( msg , aaa ); <br></script>
// aaa の前に msg の ID が挿入されていることがわかりました。
Jsの内部処理方法はappendChild()と同様です。また、
まず、ID msg を持つものをドキュメントから削除し、それを aaa の前のノードとして aaa の前に挿入します。


全員が手書きで書くべきです。そうしないと、読んだだけではなかなか覚えられません。
さて、今回はここまで、続きは明日にしましょう。
今日は、dom メソッドを使用してノードの作成、ノードのコピー、ノードの挿入について説明しました。
明日は、ノードの削除、ノードの置換、ノードの検索などについて説明します。 。 。 。 。 。
それでもわからない場合は、Google で情報を検索してください。