JS DOM（非常に詳細で、DOMの知識に精通していない場合は必見）

JS DOM（ドキュメントオブジェクト）

属性要素（要素）新しい麦粒腫（新しいスタイル）

すべてテキストなので、多くの友達は読みたくないのかもしれませんが、とても便利です。

このオブジェクトモデルを通じて、JavaScriptは動的HTMLを作成するすべての要素を取得
し
ます。JavaScriptはページ内のすべてのHTML要素を変更できますJavaScriptはページ内のすべてのHTML属性を
変更できますJavaScriptはページ内のすべてのCSSスタイルを変更
できますJavaScriptは既存のHTML要素と属性を削除できます
JavaScriptは新しいHTML要素と属性を追加できます
JavaScript
はページ内の既存のすべてのHTMLイベントに反応できますJavaScriptはページ内に新しいHTMLイベントを作成できます

HTML要素のコンテンツを変更する
方法HTML要素のスタイル（CSS）を変更する
方法HTMLDOMイベントに応答する方法HTML要素
を追加および削除する方法

DOMでは、すべてのHTML要素がオブジェクトとして定義されています。
属性は、取得または設定できる値です（HTML要素のコンテンツの変更など）。
メソッドは、実行できるアクションです（HTML要素の追加や削除など）。

innerHTML 属性

要素のコンテンツを取得する最も簡単な方法は、innerHTML属性を使用することです。var element =
element。innerHTMLinnerHTMLプロパティを使用して、HTML要素のコンテンツを取得または置換できます。
innerHTMLプロパティを使用して、およびを含む任意のHTML要素を取得または変更できます。

element.innerHTML =新しいhtmlコンテンツは内部HTMLを変更します
element.attribute =新しい値はHTML要素の属性値を変更します
element.setAttribute（attribute、value）HTML要素の属性値を変更します
element.style.property =新しいスタイルの変更HTML要素スタイル

要素ノードの追加と削除
document.createElement（element）HTML要素の作成
document.removeChild（element）HTML要素の削除
document.appendChild（element）HTML要素の追加
document.replaceChild（element）HTML要素の置換
document.write（text）HTML出力の書き込みストリーム

イベントハンドラーを追加し
ますdocument.getElementById（id）.onclick = function（）{実行するコードブロック}

HTMLオブジェクトを検索する

document.anchorsは、name属性を持つすべての要素を返します。

document.appletsはすべての要素を返します（HTML5は推奨されません）

document.baseURIは、ドキュメントの絶対ベースURIを返します

document.bodyは要素を返します

document.cookieは、ドキュメントのCookieを返します

document.doctypeは、ドキュメントのdoctypeを返します

document.documentElementは要素を返します

document.documentModeは、ブラウザで使用されるモードを返します

document.documentURIは、ドキュメントのURIを返します

document.domainは、ドキュメントサーバーのドメイン名を返します

document.embedsはすべての要素を返します

document.formsはすべての要素を返します

document.head戻り要素

document.imagesはすべての要素を返します

document.implementationはDOM実装を返​​します

document.inputEncodingは、ドキュメントのエンコーディング（文字セット）を返します。

HTML要素のコンテンツを変更するには、次の構文を使用してください：
document.getElementById（id）.innerHTML = new text

HTML属性の値を変更するには、次の構文を使用してください：
document.getElementById（id）.attribute = new value

この例では、ユーザーがボタンをクリックすると、id = "id1"のHTML要素のスタイルが変更されます。

私のタイトル1

HTMLDOMを使用してイベントを割り当てる
HTMLDOMを使用すると、JavaScriptを使用してHTML要素にイベントを割り当てることができます。
例：onclickイベントをボタン要素に割り当てる：

JSコモンイベント
パソコン端末（パソコンホームページ）

ページまたは画像の読み込みが終了し
ましたオブジェクトの読み込みをクリックしますマウス
ダウンマウスボタンが押され
ましたマウスアップマウスボタンが離されましたマウスアウトマウスが
要素から離れます
マウスオーバーマウスが要素の上に移動しました
画像の読み込みが中断されます
ぼかし要素がフォーカスの
変更を失いますフィールドの内容を変更します
dblclickマウスがオブジェクトをダブルクリックします
エラードキュメントまたは画像の読み込み中にエラーが発生しました
フォーカス要素がフォーカスを取得します
キー
ダウンキーボードキーが押されましたキーが押されましたキーボードキーが押されたか、
キーアップキーボードキーが押されました
マウスムーブがオンになり、マウスが移動します。
リセットボタンがクリックされます。
ウィンドウまたはフレームのサイズが変更されます。
[テキスト]を選択します。
スクロールすると、スクロール要素がトリガーされます。
送信ボタンをクリックして
アンロードしますユーザーがページを終了します

モバイル端末（モバイルWebページ）

touchstart：タッチスタート（タッチスクリーン上の指）
touchmove：ドラッグ（タッチスクリーン上で指を動かす）
touchend：タッチエンド（タッチスクリーンから指を離す）
touchenter：指をdom要素に移動します。
touchleave：指を動かしてdom要素を残します。
touchcancel：ドラッグが中断されたときにタップがトリガーされ
ます：指が
画面に触れて
longTapをトリガーします：指が画面に触れてsingleTapをトリガーします：指が画面に触れて
doubleTapをトリガーします：指が画面をダブルタップして
スワイプをトリガーします：次の場合にトリガーされます画面上で指がスライドする
swipeLeft：画面上で指が左に
スライドすると
swipeRightがトリガーされます：画面上で指が右にスライドするとswipeUpがトリガーされます：画面上で指が上にスライドするとswipeDownがトリガーされます：
指が画面上を下にスライドするとトリガーされます

イベントモニタリング

addEventListener（）メソッドは、既存のイベントハンドラーを上書きせずに、イベントハンドラーを要素にアタッチします。
要素に複数のイベントハンドラーを追加できます。
2つの「クリック」イベントなど、同じタイプの複数のイベントハンドラーを要素に追加できます。
ウィンドウオブジェクトなどのHTML要素だけでなく、任意のDOMオブジェクトにイベントハンドラーを追加できます。
addEventListener（）メソッドを使用すると、イベントがバブリングにどのように反応するかを簡単に制御できます。
addEventListener（）メソッドを使用すると、JavaScriptタグとHTMLタグが分離されるため、読みやすさが向上します。HTMLタグを制御しなくても、イベントリスナーを追加できます。
removeEventListener（）メソッドを使用すると、イベントリスナーを簡単に削除できます。

最初のパラメーターは、イベントのタイプ（「クリック」や「マウスダウン」など）です。
2番目のパラメーターは、イベントが発生したときに呼び出す必要のある関数です。
3番目のパラメーターはブール値で、イベントバブリングとイベントキャプチャのどちらを使用するかを指定します。このパラメーターはオプションです。trueまたはflaseを使用します。デフォルト値はfalseで、バブリング伝播を使用します。値がtrueに設定されている場合、イベントはキャプチャ伝播を使用します。
バブリングでは、最も内側の要素のイベントが最初に処理され、次に
最も外側の要素が処理されます。キャプチャでは、最も外側の要素のイベントが最初に処理され、次に最も内側の要素が処理されます。

注：イベントに「on」プレフィックスを使用しないでください。「onclick」の代わりに「click」を使用してください。

DOMノード：

	**节点关系**

W3C HTML DOM標準によれば、HTMLドキュメント内のすべてが
ノードです。ドキュメント全体がドキュメントノードです。
各HTML要素は要素ノード
です。HTML要素内のテキストはテキストノードです。
各HTML属性は属性です。ノード。
すべてのコメントはコメントノードです。

HTML DOMを使用すると、ノードツリー内のすべてのノードにJavaScriptを介してアクセスできます。
新しいノードを作成する機能、およびすべてのノードを変更および削除する機能。

**节点树中的节点彼此之间有一定的等级关系。**

用語（親、子、および兄弟、親、子、および兄弟）は、これらの関係を説明するために使用されます。
ノードツリーでは、最上位ノードはルート（ルートノード）と呼ばれます。
ルートを除いて、すべてのノードには親ノードがあります（ルートノードには親ノードがありません）。
ノードには特定の数の子を
含めることができます。兄弟（兄弟または姉妹）は、同じ親を持つノードを指します。HTML DOMを使用すると、ノードツリー内のすべてのノードにJavaScriptを介してアクセスできます。
新しいノードを作成する機能、およびすべてのノードを変更および削除する機能。

1：

二：

三：

nodeName属性
nodeName属性は、ノードの名前を指定します。
nodeNameは読み取り専用です。
要素ノードのnodeNameはラベル名と同等
です。属性
ノードのnodeNameは属性名です。テキスト
ノードのnodeNameは常に#textdocumentです。nodenodeNameは常に#documentです。

nodeValueプロパティ
nodeValueプロパティは、ノードの値を指定します。
要素ノードのnodeValueは未定義
ですテキストノード
のnodeValueはテキストテキストです属性ノードのnodeValueは属性値です

	appendChild() 方法，追加新元素作为父的最后一个子。

var div = document.createElement（ "div"）; //新しいdiv要素ノードを作成しますvarnode
= document.createTextNode（ "This is new text。"）; //新しく追加されたdiv要素
document.bodyにテキストコンテンツを追加します.appendChild（node）; // div要素ノードをその子ノードとしてbody要素ノードに追加しますが、bodyの既存の子ノードの最後に配置します

newNode：挿入されるノード

 referenceNode：被参照的节点（即要插在该节点之前）
 insertedNode：插入后的节点
	 parentNode：父节点
	 代码示例：

etElementsByTagName（）メソッドはHTMLCollectionオブジェクトを返します。
次のコードは、ドキュメント内のすべてを選択します

要素：
例：var x = document.getElementsByTagName（ "p"）;
コレクション内の要素にはインデックス番号でアクセスできます。forループを通過でき、xには長さ属性があり、インデックスは0から始まります。
2番目にアクセスするには

要素、次のように書くことができます：
y = x [1];

HTML DOMNodeListオブジェクト

NodeListオブジェクトは、ドキュメントから抽出されたノードのリスト（コレクション）です。
NodeListオブジェクトは、HTMLCollectionオブジェクトとほぼ同じです。
getElementsByClassName（）メソッドを使用する場合、一部の（古い）ブラウザーはHTMLCollectionの代わりにNodeListオブジェクトを返します。
すべてのブラウザは、childNodesプロパティのNodeListオブジェクトを返します。
ほとんどのブラウザは、querySelectorAll（）メソッドのNodeListオブジェクトを返します。
次のコードは、ドキュメント内のすべてを選択します

ノード：
例
var myNodeList = document.querySelectorAll（ "p"）; HTMLCollection
とNodeListHTMLCollectionの
違いは、HTML要素のコレクションです。
NodeListは、ドキュメントノードのコレクションです。
NodeListとHTMLコレクションはほとんど同じです。
HTMLCollectionオブジェクトとNodeListオブジェクトは、どちらも配列のようなオブジェクトリスト（コレクション）です。
それらはすべて、リスト（コレクション）内のアイテムの数を定義するlengthプロパティを持っています。
それらはすべて、インデックス（0、1、2、3、4、…）による配列のように各アイテムにアクセスできます。
HTMLCollectionアイテムへのアクセスは、名前、ID、またはインデックス番号で行うことができます。
NodeListアイテムには、インデックス番号を介してのみアクセスできます。
NodeListオブジェクトのみが属性ノードとテキストノードを含むことができます。
ノードリストは配列ではありません！
ノード配列は配列のように見えますが、そうではありません。
ノードのリストをトラバースして、配列のようにそれらのノードを参照できます。
ただし、ノードリストでvalueOf（）、push（）、pop（）、join（）などの配列メソッドを使用することはできません。