8(更新中...)についての詳細を学ぶためのJS(JavaScriptの)

図の要素ノードツリー。

ドキュメント>のdocumentElement>ボディ> tagNameを

 

offsetLeft / offsetTop 運動をマージ

スクロールカルーセル

  1.DOMフルネーム:ドキュメントオブジェクトモデル

    (1)図中のツリーのノード。

    ドキュメント>のdocumentElement>ボディ>タグ名

  2.私たちの共通のノードタイプ

    要素ノードタグ

    テキストノード(テキストノード)

    プロパティノードタグ属性

    

3.documentはと呼ばれる性質があるのnodeTypeのリターンがデジタルであります

  1 ノード要素の代わりに   2 属性ノード   3 テキストノードの代表

4.ノードを取得します

 

  要素ノードを取得するために多くの方法があります。

 

  document.getElementById()

 

  document.getElementsByClassName()

 

  document.getElementsByTagName()

 

  document.querySelector()

 

  document.querySelectorAll()

  属性ノードを取得します。

  Elementsは .attributes コレクションからなるbody要素のすべての属性を取得する(配列)

  内部得られた値 素子 .attributes [1] .VALUE

  要素 .getAttribute(「属性名」)は、プロパティ値のメソッドを取得しました

  要素 .setAttribute(「属性名」、「属性値」)   要素の属性と属性値を設定します

  要素 .removeAttribute(「プロパティ」)   プロパティを削除します。

  Textノード

  メソッドが取得されていない、何の意味がありません

5.要素の子を取得します。

  要素.childNodesは、   このプロパティは、標準のブラウザとの互換性を持っているテキストノードを取得します

  ブラウザの低いバージョンではありませんが。子供が使用することをお勧めしますこのプロパティを

  単一の子ノードを取得します

  最初の子を取得します。

  標準的な 要素 .firstElementChild

  非標準の下では 要素 .firstChild

  互換性のある文言の下で

    VARリスト=のdocument.getElementById( "リスト")

    VaRの拳= list.firstElementChild || list.firstChild

    console.log(拳)

 

  最後の子を取得します。

  要素 .lastElementChildの      要素.lastchild

  前の兄弟を取得します。

  要素 .previousSibling

  元素 .previousElementSibling

  次の兄弟ノードを取得します。

  要素 .nextSibling

  要素 .nextElementSibling

 

6.親ノードを取得します。

  要素は .parentNodeない   は互換性を

  元素 .parentNode.parentNode

  offsetParentの区別はparentNode 違いを

 

DOM2は、動的にノードを作成しました

1. ノードの生成方法  のdocument.createElement(「DIV」)を

 

2. 親ノードのプロセス要素を挿入.appendChild(新しいノードを

 

新しいノードの親ノードの子ノードの後ろに挿入されています

 

3. 指定した場所に新しいノードを挿入します

 

(1)  親要素 .insertBefore(新しいノードその前部)   指定された要素への新しいノードの前に

 

図4に示すように、要素ノードの親要素の削除)(.removeChildを

 

 

ケーススタディ

 

  イミテーションメッセージボード

  

  互換性

  要素が子ノードを持たない、 IE の低いバージョンには、標準のブラウザながら、読んでいないだろう。

  標準ブラウザが子ノードとしてノードをテキスト、およびなりますので ie6-8 ません。

 

ハイパーリンクのプロパティのhref 分析

 

  <a href=""> クリックすると、背景にリクエストを送信するのと同等のページを更新します。

 

  <a href="#s"> アンカーは一定にジャンプし、ID と呼ばれるS 上の位置

 

  <a href="javascript:;"> ページを更新する機能をキャンセル

 

 

 

広げます

文字列の連結とドムの作成が道をレンダリングしています

文字列の連結

利点 階層の簡単な、強い感覚は、大量のデータを扱うことができます

短所:文字列の連結は、元のイベントの子要素に影響を与えます

 

ドムの作成

長所オリジナルの要素に影響を与えずに、別のエンティティであります

短所大量のデータを処理することは多くの問題だろうとなりますDOM 逆流

 

ドム逆流

 

ページのレンダリングは、私たちがすると htmlのすべてのブラウザの調査の構造変更するには、簡単な追加や削除をDOMが再配置を、これはドム真剣ブラウザのパフォーマンスに影響を与え、逆流。

 

 

 

サプリメント

 

ページのパフォーマンスの最適化を強化

 

  1. より多くのスプライトマップを使用します
  2. デフォルトの動作を防止するためのハイパーリンク
  3. ドムは逆流を減らします
  4. サーバーへの要求の数を減らします

 

 

おすすめ

転載: www.cnblogs.com/zff123/p/9985534.html