図の要素ノードツリー。
ドキュメント>の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が再配置を、これはドム真剣ブラウザのパフォーマンスに影響を与え、逆流。
サプリメント
ページのパフォーマンスの最適化を強化
- より多くのスプライトマップを使用します
- デフォルトの動作を防止するためのハイパーリンク
- ドムは逆流を減らします
- サーバーへの要求の数を減らします