コンセプト
ドキュメントオブジェクトモデル（DOMと呼ばれる文書オブジェクトモデルは、）、W3C推奨治療拡張マークアップ言語標準プログラミング・インターフェースです。それは（現在は、HTMLやXML文書が説明の部分で定義される）コンテンツ、構造およびスタイルWWW文書の更新を動的にプログラムやスクリプトにアクセスすることができ、プラットフォームや言語に依存しないアプリケーション・プログラム・インターフェース（API）であり、 。文書は、さらに処理することができ、処理の結果は、現在のページに追加することができます。DOMは、文書全体をメモリに代表される処理を必要とし、ツリーベースのAPIドキュメントです。別の簡単なAPIは、メモリ処理に大きな、そうではないすべてのフィット感のために大規模なXML文書を処理するために使用することができSAXイベントに基づいています。
定義
ドキュメントオブジェクトモデル（DOMと呼ばれる文書オブジェクトモデルは、）、W3C推奨治療拡張マークアップ言語標準プログラミング・インターフェースです。それは（現在は、HTMLやXML文書は説明の部分で定義される）コンテンツ、構造およびスタイルWWW文書の更新を動的にプログラムやスクリプトにアクセスすることができ、プラットフォームや言語に依存しないアプリケーション・プログラム・インターフェース（API）であり、 。文書は、さらに処理することができ、処理の結果は、現在のページに追加することができます。DOMは、文書全体をメモリに代表される処理を必要とし、ツリーベースのAPIドキュメントです。別の簡単なAPIは、メモリ処理に大きな、そうではないすべてのフィット感のために大規模なXML文書を処理するために使用することができSAXイベントに基づいています。
私たちは、一般的にDOMツリー直感的なパフォーマンスを使用します
| 方法 | 説明 |
|---|---|
| getElementByIdを（） | 指定されたIDを持つ要素を返します。 |
| getElementsByTagNameの（） | 指定されたタグ名を持つすべての要素を含む戻りノードのリスト（セット/ノード配列）されています。 |
| getElementsByClassName（） | 指定されたノードは、クラスの名前が含まれているとすべての要素のリストを返します。 |
| appendChild（） | 特定のノードに新しい子ノードを追加します。 |
| removeChild（） | 子ノードを削除します。 |
| replaceChild（） | 子ノードを交換してください。 |
| insertBefore（） | 子ノードの前に新しい子ノードを挿入します。 |
| createAttributeを（） | 属性ノードを作成します。 |
| createElement（） | 要素ノードを作成します。 |
| createTextNode（） | テキストノードを作成します。 |
| getAttribute（） | 指定された属性値を返します。 |
| setAttribute（） | 設定または指定された値に指定されたプロパティを変更します。 |
いくつかの一般的に使用されるHTML DOM属性：
- innerHTMLの - ノードのテキスト値（要素）
- parentNode - 親ノードのノード（要素）
- childNodes - 子ノードのノード（要素）
- 属性 - ノード（要素）属性ノード
アクセスノード
1.var DIV =のdocument.getElementById（ 'ID名'）;
2.var DIV = document.getElementsByTagName（ 'タグ名'）;
3.var DIV = document.getElementsByClassName（ '类名'）。
親：
VAR = document.getElementByClassNameスパン（ 'SPAN1'）
console.log（スパン[0] .parentNode）
前の兄弟ノード：
VAR = document.getElementId DIV2（ 'DIV2'）
VAR next1 = div2.previousElementSibling
console.log（next1）
子ノード：
VAR =のdocument.getElementByIdボックス（ '箱'）
console.log（box.childNodes）
console.log（box.children）
console.log（box.children.lenth）
console.log（box.firstChild）
console.log（box.firstElementChild）
console.log（box.lastChild）
console.log（box.lastElementChild）
ノードを作成します：
VAR =李documnet.createElement（ 'リー'）
li.innerHTML =「こんにちはみんな」
console.log（LI）
VAR UL =のdocument.getElementById（ 'リスト'）
ul.appendChild（LI）
削除するノード：
VAR UL =のdocument.getElementById（ 'リスト'）
ul.removeChild（ul.firstElementChild）
VAR LI6 =のdocument.getElementById（ 'LI6'）
ul.removeChild（LI6）
モバイルノード：
VAR = DIV1のdocument.getElementById（ 'DIV1'）
VAR DIV2 =のdocument.getElementById（ 'DIV2'）
div1.appendChild（DIV2）
交換ノード：
VAR = LI6のdocument.getElementById（ 'LI6'）
VAR P =のdocument.createElement（ 'P'）
li6.parentNode.replaceChild（P、LI6）
