JSの研究ノート04-ページのDOM

JavaScriptのDOMは、「ドキュメントオブジェクトモデル」（ドキュメントオブジェクトモデル）と呼ばれる、Webインタフェースを操作しています。これは、スクリプト（たとえば、追加または削除、コンテンツなど）の各種操作を行うことができますJavaScriptオブジェクトに変換するウェブページの役割です。DOM最小構成単位と呼ばれるノード（ノード）、ノードの一般的なタイプは4つあります。

ドキュメント：文書全体のツリーの最上位ノード。

エレメント次のような種々の標識、のページ<body>。

テキスト：ラベルやタグ、テキストが含まれています。

ATTR次のようなページ要素の属性、class="right"。

一、Node

すべてのDOMノードオブジェクトが継承するNodeインタフェースは、いくつかの一般的なプロパティとメソッドを持っています。これは、基礎DOM操作です。

1.1オブジェクトのプロパティ

baseURIプロパティは、（反対ページにブラウザのURLパスをプロパティに基づいて計算される）現在のページの絶対パスを表す文字列を返します。この属性の値は、（すなわち、現在のURLのURLで一般的にwindow.location決定属性）。HTMLをするために使用することができる<base>ラベル属性の値を変更します。
isConnectedプロパティは、ドキュメント内の現在のノードかどうかを示すブール値を返します。
nodeTypeプロパティは、現在のノードのタイプを表す整数値を返します。Node.DOCUMENT_XXXは、上述した様々なタイプによって定義されます。
nodeNameプロパティは、現在のノードの名前を表す文字列を返します。
nodeValueプロパティは、テキストノード自身の現在の値を表す文字列を返します。テキスト値で注釈を付けた要素のみ、テキストは、ノードの他のすべてのタイプを返しますnull。
textContentプロパティは、現在のテキストノードおよびそのすべての子孫ノードを表す文字列を返します。それは自動的にすべてのテキストコンテンツを返し、ノード内の現在のHTMLタグを無視します。
parentNodeプロパティは、現在のノードの親ノードを返します。ドキュメント・ノード（文書）、要素ノード（要素）とドキュメントフラグメントノード（ドキュメント・）：ノードに対して、その親ノードは3種類のみであってもよいです。
nextSibling現在のノードの最初の兄弟ノードは、属性（要素、テキスト、コメント）を返します。何も存在しませんnull。
previousSiblingこのプロパティは、ノードの前の最初の兄弟ノード（要素、テキスト、コメント）を返します。何も存在しませんnull。
firstChildプロパティは、現在のノード（要素、テキスト、コメント）の最初の子ノードを返します。現在のノードに子がない場合は、それが返されますnull。
lastChild現在のノードの最後の子属性ノード（要素、テキスト、コメント）を返します。現在のノードに子がない場合は、それが返されますnull。
childNodesプロパティは、配列オブジェクトのクラス（返しNodeList、現在のノード（要素、テキスト、コメント）のすべての子ノードのメンバーを含む、セット）。

以来、NodeList子ノードの変更が即座に結果に反映された後の目的は、動的なコレクションで返されます。

場合は上記リターンテキストノードスペースの前に現在のノードた場合、プロパティは、テキストノード、コンテンツのスペースを返します。

1.2オブジェクトのメソッド

hasChildNodesメソッドは、現在のノードが子を持つかどうかを示すために使用されます。
insertBeforeノードのノード以前に指定された子ノードを挿入するための方法（挿入すべきノードが現在DOMノードが存在している場合、ノードは元の位置から削除され、新しい位置を挿入）。最初のパラメータは、挿入するノードの方法でありnewNode、2番目のパラメータは、子ノードであるreferenceNode（第2のパラメータがある場合null、新しいノードは、すなわち、最後の子ノードになり、現在のノード内の最後の位置に挿入されています）。戻り値は、新しいノードが挿入されていますnewNode。
removeChild現在のノードからサブノードを除去する方法。メソッドのパラメータには、削除する子ノードです。戻り値は削除したノードです。
replaceChild新しいノードに使用される方法は、現在のノードの子を交換してください。メソッドの最初のパラメータは、newChild新しいノードを置き換えるために使用され、2番目のパラメータは、oldChild子ノードを取るために交換されます。戻り値は、どこへ行くか、交換ノードですoldChild。
getRootNode()この方法は、現在のドキュメントのドキュメントのルートノードを返します。

二、ドキュメント

documentNodeオブジェクトは、各ページには独自の持っている、文書全体を表しているdocumentオブジェクトを。このノードは2つのつの子ノードを有している：最初のノードは、文書タイプである（<!doctype html>）; HTMLページの上から2番目のコンテナタグ<html>他のHTMLタグをノードである後者は、ツリー構造のルートノード（ルートノード）を構成し、下位ノード。documentオブジェクトを取得することができ、さまざまな方法があります。

通常のWeb：使用しますdocumentかwindow.document。
iframeウェブ：使用してiframeノードcontentDocumentのプロパティを。

2.1オブジェクトのプロパティ

doctype所有財産を返します<DOCTYPE>ノード。document.firstChild通常、このノードを返します。
documentElementCurrentプロパティは、文書のルート要素ノードを返します。document.lastChild通常、このノードを返します。
head属性が指す<head>ノード。省略されたページのソースコードは、ブラウザが自動的に作成される場合、このプロパティは、常にあります。
bodyプロパティを返し<body>たノードを。省略されたページのソースコードは、ブラウザが自動的に作成される場合、このプロパティは、常にあります。
locationプロパティは、関連するURL情報と操作方法を提供する、ブラウザによって提供されるネイティブオブジェクトです。
cookieオブジェクトは、ブラウザのクッキーを動作させるために、ブラウザによって提供されるネイティブ属性。

2.2オブジェクトメソッド

querySelectorAll戻りマッチングノードセレクタ要素、戻りの指定方法NodeListインスタンス。戻り結果は、それが要素ノードでのリアルタイムの変化を反映していない、動的なコレクションではありません。複数のノードが整合条件を満足する場合、最初に一致するノードが返されます。一致するものが見つからない場合はノードが返されますnull。それがサポートされていないCSSセレクタは、擬似要素（など:first-lineと:first-letter）、および（例えば、擬似クラスセレクタ:linkと:visited擬似要素と擬似クラスを選択することができません）。
getElementById指定されたメソッドが返すと一致id返し、要素ノードの属性NodeList文書の変更を反映するために、非リアルタイムのインスタンスを。
getElementsByNameこの方法は、マッチング返しname要素ノードの属性を返すNodeList文書の変更を反映するために、非リアルタイムのインスタンス。
getElementsByTagName本方法は、一致するタグのノードを返しHTMLCollectionインスタンスを、リアルタイムに文書の変更を反映することができます。
getElementsByClassNameこの方法は、ノードクラスの一致の名前を返しHTMLCollection、文書のインスタンスは、実時間の変化を反映することができます。
createElement要素ノードを生成するための方法、および戻りノード。
createAttributeこの方法は、新しい属性ノード（生成Attrインスタンス）、およびノードに戻ります。
createEventイベントオブジェクト（生成方法Eventインスタンス）は、オブジェクトがすることができるelement.dispatchEvent方法であって、指定されたトリガイベントを使用します。パラメータ方法は、イベントの種類、などでありUIEvents、MouseEvents、HTMLEventsなど。イベント処理は、次の章を参照します。

三、属性

3.1オブジェクトのプロパティ

Element.attributesプロパティは、動的オブジェクトの同様の配列を返し、メンバーは、要素タグノードオブジェクトのすべての属性であり、変化はノード・オブジェクトにリアルタイムに反映される属性。プロパティ自体がオブジェクトである（Attrオブジェクト）。したがって、アレイの上記の特性と同様ではなく、属性値よりも、ノードオブジェクトを返されます。Nodeオブジェクトは、プロパティがあるnameとvalue、属性、属性名と値に相当すべき性質nodeNameの特性とnodeValue属性を。

HTMLの属性名は、キーのJSを回す：あなたは、すべて小文字をJSの属性名を有効にすると、属性名が複数の単語、ラクダのスペルの使用を含む場合。いくつかのHTML属性の名前は、JSのプロパティを回す際のJavaScriptの予約語は、主に以下の2、名前を変更する必要があります：

forプロパティへhtmlFor

classプロパティへclassName

Element.datasetプロパティは、オブジェクトを返し、オブジェクトはこのから読み取ることができますdata-プロパティ。同様に<div data-timestamp="1522907809292"></div>、<div>要素は、カスタム持つdata-timestampタイムスタンプを追加するために使用される要素のプロパティを。

HTMLの属性名は、JSキーを回す：へのターンdataset時にキー名、小文字が続く場合は併せてラインが続き、その後、一緒ラインが他の文字変わらず、大文字と小文字を削除されます。逆にdatasetキーは属性名に電源を入れたときに、すべて大文字の文字が一緒ライン+小文字に変換され、他の文字変更されません。dataset.helloWorldに変わりますdata-hello-world。

3.2オブジェクトメソッド

hasAttributeこの方法は、現在のノードが指定されたプロパティの要素を含むかどうかを示すブール値を返します。
getAttributeこの方法は、指定されたプロパティの現在の要素ノードを返します。指定されたプロパティが存在しない場合は、それが返されますnull。
setAttribute現在の新しいプロパティ要素のために使用される方法。同じ名前の属性がすでに存在する場合は、編集既存のプロパティは同じです。
removeAttribute指定されたプロパティを除去する方法。