JUDGMENT
ドキュメントオブジェクトモデルドキュメントオブジェクトモデル
系統
DOM0;
DOM1; 1998 W3C推奨バージョン
DOM2; 2000年;
DOM3; 2004年;
DOM4; 2015年;
ノードノード
ノード | NodeName | ノードタイプ | nodeValue |
---|---|---|---|
要素ノードElementNode | ラベル名 | 1 | ヌル |
テキストノードTextNode | #テキスト | 3 | テキストコンテンツ |
属性ノードAttributeNode | プロパティ名 | 2 | プロパティ値 |
クイック検索ノード
document.getElementById( "id名"); idで検索; idがユニーク。
document.getElementsByTagName(「要素名」);名前で要素を見つけます。
document.getElementsByName(「名前値」);名前値で検索。
document.getElementsByClassName(「クラス値」);クラス値で検索。
getElement GET一つだけ。
アレイとしてメモリの複数を得るgetElements。
HTML5は、新しいCSSセレクタによって得ることができます
満たす最初の要素ノードを取得します。
document.querySelector(CSSセレクタ); IF( "ヘッダ> navl")。
ストレージアレイを満たすために、すべての要素ノードを取得します。
document.querySelectorAll(CSSセレクタ); IF( "ヘッダ> navl")。
注:querySelectorとquerySelectorAllはないリアルタイムの要素ノードに到達します。
例:あなたが削除すると、削除された見ることができますが、どのコースが削除されたノードに到達することができます。
関係レベルを探します
最初のノードを取得
= document.querySelectorを聞かせて( "ヘッダ> navl")。
親を探します
a.parentNode;
兄弟を探します
a.previousSibling、前のノード。
a.nextSibling;次のノード。
その後、前方に戻って取得する必要性と、キャリッジリターンなどのテキスト文字スペースなどの文字があるときに取得。
a.previousSibling.previousSibling;
a.nextSibling.nextSibling;
子ノードを探します
a.firstElementChild;
a.lastElementChild;
新しい要素ノード
1.要素ノードを作成し、creatElement
B = document.creatElement( "P")しましょう。
2.要素ノードは、コンテンツに付加されている。のappendChild
C = document.creatTextNode( "ABCD")しましょう。
b.appendChild(C);
3.新しいノードは、対応する要素の位置に追加される;のappendChildを
聞かせてD =文書.getElementByClassName(」「);
d.appendChild(C);
APPENDCHILD要素ノードが最後に添加されます。
要素ノードを挿入
1.新しい素子P1を作成します。
2.親要素secEle。
3.既存の素子P2を取得します。
4.既存の要素に新しい要素を追加する前に
secEle.insertBofore(P1、P2)。
削除要素ノード
削除する親要素ノードを取得します。1.。
.removeChildノード2の親要素(要素ノードを削除します)。
要素ノードを交換します
要素ノードを作成します。1.
親要素ノードを取得します。2.
子要素ノードを取得することは3.交換します
前記親要素ノード.replaceChild(新しいノードは、ノードが交換されます)。
クイック交換要素の内容
要素ノードを取得1.置換されます。
せ秒= document.getElementByClassName(」「)。
コンテンツを交換する2
sec.innerText =「」;「コンテンツの内容は、」解決しない代替、です。
sec.innerHTML =「」;「コードはHTML形式で記述することができ、」内部で、それを解決することができます。
クローニングノード
ノードを取得します。1.
(」「)ele1 = document.getElementByClassNameてみましょう。
2.深いクローン
newEle = ele1.cloneNode(真)させ、ノードのクローン子ノード。
3.浅いクローン
newEle = ele1.cloneNode(false)を聞かせて、クローンは、ノードの子ノードが含まれていませんでした。
属性ノード
属性ノードの値を取得します。
-
ノードを取得します。
(」「)ele1 = document.getElementByClassNameてみましょう。
-
プロパティ値のノードを取得します。
ele1.getAttribute(「クラス」)、ノードの属性の値のクラスを取得します。
ele1.getAttribute(「名前」); name属性の値として得られるノード。
属性ノードの値
ノードを取得します。1.
(」「)ele1 = document.getElementByClassNameてみましょう。
2.設定
ele1.setAttribute(属性名、属性値); ele1.setAttribute( "クラス"、 "LO");
削除要素ノード
ノードを取得します。1.
(」「)ele1 = document.getElementByClassNameてみましょう。
2. [削除]
ele1.removeAttribute( "名前"); name属性を削除します。
高速ノード属性を操作します
ノードを取得します。1.
二つの値LO、POのクラスele1セット; 2.ele1.className = "LO PO"。
ele1.type = "パスワード";パスワードのele1 type属性。
JSキーワードクラスは、特殊な用途のクラス名の設定を変更するためには、使用できません。
htmlForを設定するためのlabel要素を持つ属性。
カスタムプロパティは、データ - を開始します
<セクションデータ-愛= "コ"> </ section>の
ele2 = docement.getElementByTagName( "節")しましょう。
ele2.dataset.love =「やる」;カスタムプロパティ値を変更します。