JS - DOMオブジェクト - コードワールド

、DOM：ドキュメントオブジェクトモデルドキュメントオブジェクトモデル

二、ドムカテゴリ： DOMコア（コア）。

　　　　　　　HTML DOM;

　　　　　　　CSSドン;

第三に、ノードとノードとの間の関係：

　　1.全体の文書は、文書ノードであります

　　2.各ノードは、要素タグのHTMLであります

　　要素に含まれる3 HTMLテキストは、テキストノードであります

　　4.各属性は、属性ノードのhtmlです

　　コメントノードが属する5.ノート

第四に、アクセスノード

　　ドキュメントオブジェクトの指定されたノードへのアクセス（1）シリーズ方法

　　（2）階層アクセスノードに応じて

　　　　　　parentNodeはの親ノードを返します。

　　　　　　childNodesはのchildNodes [i]は、子ノードのセットを返します。

　　　　　　firstChildは、最も一般的な使用法の最初の子ノードが要素ノードのテキストにアクセスすることで戻ります

　　　　　　lastChild最後の子ノードに戻ります

　　　　　　nextSibling次のノード

　　　　　　例えば、previousSiblingノードに

ファイブ決意ブラウザの互換性の問題：

　　firstElementChildは、最も一般的な使用法の最初の子ノードが要素ノードのテキストにアクセスすることで戻ります

　　lastElementChild最後の子ノードに戻ります

　　nextElementSibling次のノード

　　previousElementSiblingノードに

例如：oNext = oParent.nextElementSibling || oParent.nextSibling

第六に、ノード情報：

　　nodeNameを：ノード名

　　nodeValue：ノード値（文書ノードと要素ノードのためには使用できません）

　　nodeTypeの：ノードタイプ

　　　　要素要素：1

　　　　ATTR属性：2

　　　　テキストテキスト：3

　　　　コメントのコメント：8

　　　　文書ドキュメント：9

七、操作ノード：

　　ノード属性：

　　　　getAttribute（ "プロパティ名"）

　　　　setAttribute（「属性名」、「プロパティ値」）

　　作成し、ノードを挿入します。

　　　　createElement（tagNameを） tagNameを新しい要素ノードと呼ばれるタグを作成します

　　　　A.appendChild（B）ノードBの端部には、ノードに追加されます

　　　　insertBefore（A、B） A、ノードB、ノードへの挿入前

　　　　cloneNodeを（深い）が指定されたノードをコピーします

　　　　　　深い：ノードとノードのすべての子ノードをコピーし、真

　　　　　　　　　偽：ちょうどノードとそのプロパティをコピーします

　　ノードを削除し、置き換えます
　　　　のremoveChild（ノード）は、指定されたノードの削除
　　　　のreplaceChildを（newNode、oldNodeが）属性attrの他のノードと指定したノードを置き換えます

　　運用ノードのスタイル：

　　　　1.styleプロパティ：

　　　　　　要素.style。プロパティのスタイル=「値」

関数whtmouseover（）{
 // 要让字体变大颜色变绿 
のdocument.getElementById（ "WHT"）style.fontSize = "15ピクセル"。; 
document.getElementById（ "WHT"）style.color = "グリーン" 。
}。
関数whtmouseout（）{ 
// 要让字体变小 
のdocument.getElementById（ "WHT"）style.fontSize = "8px"。; 
document.getElementById（ "WHT"）style.backgroundColor = "ピンク" 。
}。

　　　　2.classNameプロパティ

　　　　　　/ * *スタイルで値のスタイル要素.className以前に命名.classNameリストを作成/　　

　　　　　　要素.className =「スタイル名」

関数lbmouseover（）{ 
のdocument.getElementById（ "LB"）クラス名= "LB"。; 
}。
関数lbmouseout（）{ 
のdocument.getElementById（ "LB"）クラス名は= "lbout"。; 
}

　　　　3. 要素.style.cssText = "CSSの属性値"

関数llmouseover（）{ 
のdocument.getElementById（ "LL"）style.cssText = "色：赤、フォントサイズ：10pxの;"。; 
} 
関数llmouseout（）{ 
のdocument.getElementById（ "LL"）style.cssText = "色：黒、フォントサイズ：60PX;"。; 
}

八、スタイルの要素を取得します　　　

　　1. 要素.style。スタイルプロパティ

　　　　しかし、この方法は、インラインの値を取得することができますので、あなたは、オブジェクトcurrentStyleを使用することができます

　　2. 要素.currentStyle。スタイルプロパティ

　　　　このオブジェクトの特性は、読み取り専用で、あなたのスタイルオブジェクトとプロパティの割り当てのスタイルを与える必要がある場合（のみIEブラウザ）

　　3.document.defaultView.getComputedStyle（要素は、null）。プロパティ

　　　　（唯一のIEはサポートしていません）

ナインは、要素の位置を取得します

　　要素の属性：
　　　　offsetLeftは、読み取り専用属性、その親要素の左境界に左余白から現在の要素を返します
　　　　offsetTopは親要素の境界からの距離に現在の要素の境界線を返し、読み取り専用属性
　　　　offsetHeight要素の高さを返しますが
　　　　offsetWidthの要素を返します幅が
　　　　offsetParentの素子オフセットコンテナを返し、を含む参照素子の即ち最近動的ポジショニング
　　　　scrollTopスプライトは、要素に一致する縦のスクロール位置を返す
　　　　scrollLeft要素に一致する水平スクロール位置を返す
　　　　clientWidth可視の素子幅戻り
　　　　clientHeightの戻り要素を非常に目立つ
　　要素の属性が適用されます。
　　　　document.documentElement.scrollTop;
　　　　document.documentElement.scrollLeft;
　　　　又は
　　　　document.body.scrollTop;
　　　　document.body.scrollLeftと、
　　固定された広告を行います。

adver VAR; 
window.onload = 関数（）{ 
adver =のdocument.getElementById（ "adver" ）; 
} 
// onscroll：トリガスクロールするスクロールバー 
window.onscrollを= 関数（）{
 // スクロールするためにスクロールバーのサイズを取得 
するvar scorlltopを= || document.documentElement.scrollTop document.body.scrollTop; 
VAR scorllleft = document.documentElement.scrollLeft || document.body.scrollLeft;
 // 要素がスクロールバーが変更と一緒に従う 
= scorlltop + 30 + "PXをadver.style.top " ; 
adver.style.left = 10 + + scorllleft "PX" ; 
}

JS - DOMオブジェクト

おすすめ