Dom属性の使い方

今回は、Dom属性の使い方と、Dom属性を使用する際の注意点を紹介します。実際の事例を見てみましょう。

1. javascript

の3つのコア 1. ECMAScript js

の構文標準 2.DOM Documentオブジェクトモデル ドキュメントオブジェクトモデルは、jsがhtmlタグを操作できるようにするメソッドを提供します

3. BOM ブラウザ オブジェクト モデル ブラウザ オブジェクト モデルは、js がブラウザを操作できるようにするメソッドを提供します

注:1. js の最大のボスは window であり、document は window の下にある単なるオブジェクトです

1. documentElement html

                document(在文档里，document是老大)
                       |
                      html
                      /  \
                     /    \
                    /      \
                   body    head
                   /       / | \
                  /       /  |  \
                 /       /   |   \
               / | \   meta title  style...
              /  |  \
             /   |   \
            p  p   ul...
            /
          /
          a

2を取得します。DOM属性

js ---> DOM --> html

を使用してHTMLタグを操作します

1. childNodesは、現在のオブジェクトNodeオブジェクトの下にあるすべての

   childrenを返します。 、テキスト ノードが返されます

注: IE8 では、要素ノードのみが返されます

1. nodeType はノード タイプを返し、要素ノードは 1 を返し、テキスト ノードは 3 を返します

   CommentNode は 8 を返します

2. Children オブジェクトの下にあるすべての子要素ノードを返します。互換性の問題はありません

3. firstChild は最初の子ノードを返します。これは IE8 の childNodes と同じように動作します

1. lastChild は上記のように最後の子ノードを返します

1. firstElementChild は、IE8 と互換性のない最後の要素ノードを返します

1. nextSibling 主流のブラウザでは、次の兄弟ノードは要素ノード以外のノードを取得する可能性があります。IE8 では要素ノードのみです。 If そうでない場合は null を返す

2. previousSibling 前の兄弟要素ノードは上記と同じ

3. nextElementSibling 次の兄弟要素ノードがない場合は null を返す

1. previousElementSibling と同じ上記

2. parentNode * Return 親ノードに互換性がありません

3. offsetParent 見つからない場合は最終的に本体に戻ります 互換性の問題はありません

。 13.nodeName タグのコンストラクタタグ名を返します

大文字

3. DOMの一部のメソッド

creatElement('p')

これがラベルです

新しい要素ノードを作成するには、次のことを受け入れる必要がありますパラメータであり、パラメータは作成する必要があるラベルです。

createTextNode()

テキストノードを新規作成

createComment()

コメントノードを新規作成

ノード操作

要素ノードを追加

1.Parent.appendChild(子ノード)子ノードを追加する親ノードで、親のすべての子要素ノードの後に​​ノードを追加します

2.Parent.insertBefore(子ノード,指定された子ノード) 指定されたノードの前に追加します

parent。 (削除が必要なノード)

1. 1. クローンノード cloneNode

クローンノード、クローンparent.cloneNode()

関数はパラメータを受け取りますが、デフォルトはfalse、浅い値です。 copy、深いコピーの場合は true

浅いコピー: ラベルのみをコピーします

。

ディープコピー: このタグオブジェクトに関連するいくつかのタグのインライン情報をコピーします。js 内のカスタム属性はコピーされません。

これは私のDOM学習に関するメモです。お役に立てれば幸いです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JavaScript に最適化された DOM

WeChat アプレットで双方向データ バインディングを実装する方法
JavaScript 文字列の使用方法

以上がDom属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。