JavaScript の知識ポイントの要約: DOM

1. DOM の概要

1.1 DOM

完全な JavaScript 実装は、次の 3 つの異なる部分で構成されます。

• コア (ECMAScript): 言語のコア部分。言語の構文と基本オブジェクトを記述します。

• ドキュメント オブジェクト モデル (DOM): Web ページ コンテンツを処理するためのメソッドとインターフェイスを記述する、Web ページ ドキュメント操作標準。

• ブラウザ オブジェクト モデル (BOM): クライアントとブラウザ ウィンドウの操作の基礎であり、ブラウザと対話するためのメソッドとインターフェイスを記述します。

ドキュメント オブジェクト モデル ( Document Object Model，简称DOM ) は、拡張可能なマークアップ言語 (HTML または XML) を処理するために W3C 組織によって推奨されている標準编程接口です。
W3C は、Web ページのコンテンツ、構造、スタイルを変更できる一連の DOM インターフェイスを定義しました。

公式言語:ドキュメント オブジェクト モデル (DOM) は、拡張可能なマークアップ言語を処理するために W3C 組織によって推奨されている標準プログラミング インターフェイスです。これは、プラットフォームおよび言語に依存しないアプリケーション プログラミング インターフェイス (API) であり、プログラムやスクリプトに動的にアクセスし、その内容、構造、www ドキュメントのスタイルを更新できます (HTML および XML ドキュメントは説明セクションを通じて定義されます)。ドキュメントをさらに処理し、処理の結果を現在のページに追加できます。 DOM はツリーベースの API ドキュメントであり、処理中にドキュメント全体がメモリ内に表現される必要があります。もう 1 つの単純な API はイベントベースの SAX です。これは、非常に大きな XML ドキュメントを処理するために使用できます。サイズが大きいため、すべてをメモリ内で処理するのには適していません。

1.2 DOM ツリー

• ドキュメント: ページはドキュメントです。ドキュメントは
• 要素を表すために DOM で使用されます。ページ内のすべてのタグは要素であり、要素は
• ノードを表すために DOM で使用されます。Web ページ内のすべてのコンテンツはノード (ラベル、属性、テキスト、

2. 要素の取得

2.1

実際の開発ではDOM

• を使って

DOM 把以上内容都看做是对象

ページ内の要素を取得するにはどうすればよいですか? 次の方法でページ内の要素を取得できます:

• ID に基づいて取得する
• タグ名に基づいて取得する
• HTML5 の新しいメソッドを使用して
• 特別な要素を取得する
  

2.2 IDによる取得

getElementById()メソッドを使用して、ID付きの要素オブジェクトを取得します。

document.getElementById('id');

console.dir() を使用して、取得した要素オブジェクトを出力し、オブジェクト内のプロパティとメソッドをよりよく確認します。

2.3 タグ名に基づいて取得

getElementsByTagName() メソッドを使用して、指定されたタグ名を持つオブジェクトのコレクションを返します。

document.getElementsByTagName('タグ名');

注:

1. 取得するのはオブジェクトのコレクションであるため、内部の要素を操作したい場合はトラバースする必要があります。
2. 要素オブジェクトの取得は動的です。

2.4 HTML5 の新しいメソッドで document.getElementsByClassName('class name') を取得します

。 // クラス名に従って要素オブジェクトのコレクションを返します。 document.querySelector('selector'); // に従って返します。指定されたセレクター 最初の要素オブジェクト document.querySelectorAll('selector'); // 指定されたセレクターに従って返されます

注意：
querySelector および querySelectorAll のセレクターは、次のようにマークする必要があります。 document.querySelector('#nav');

2.5 特別な要素 (body、html) を取得する

1. body 要素を取得する

doucumnet.body // body 要素オブジェクトを返す

2. html 要素を取得する

document.documentElement // html 要素オブジェクトを返す

3. イベントの基本

3.1 イベントの概要

JavaScript で有効になる動的ページを作成するのは私たちであり、イベントは JavaScript によって検出できる動作です。
简单理解： 触发--- 响应机制。
Web ページ内の各要素は、JavaScript をトリガーできる特定のイベントを生成できます。たとえば、ユーザーがボタンをクリックしたときにイベントを生成し、特定の操作を実行できます。

3.2 イベントの 3 つの要素:

1. イベント ソース (誰が)
2. イベント タイプ (どのイベント)
3. イベント ハンドラー (何を行うか)

case:

var btn = document.getElementById('btn');
btn.onclick = function() {
 alert('調子はどうですか'); 
3.3

イベントを実行する手順:

1. イベント ソースの取得、
2. イベントの登録 (バインド イベント)
3. 、イベント ハンドラーの追加 (関数割り当ての形式)

3.3 共通のマウス イベント

注：以下图片的事件只是常见的并不代表所有

3.4 イベントの 3 つの要素を分析します

。
1. イベントソース (何を操作したいのか)

2. イベント (望ましいインタラクション効果を達成するために何をしたいのか)

3. 処理関数 (イベントが進行した後にターゲットをどのように見せたいのか)

4 . 操作要素

JavaScript DOM 操作では、Web ページのコンテンツ、構造、スタイルを変更できます。DOM 操作要素を使用して、要素内のコンテンツ、属性などを変更できます。以下はすべて属性であることに注意してください

。 4.1. 要素のコンテンツ

element.innerText を

開始位置から終了位置に変更しますが、同時に、スペースと改行も

開始位置からコンテンツ全体を

の

共通の要素属性操作

innerText および innerHTML
ソース、href
id、alt、title

4.3 フォーム要素の属性操作

DOM を使用して、次のフォーム要素の属性を操作できます:

type、value、checked、selected、disabled

4.4 スタイル属性操作

サイズ、色、位置、その他のスタイルを変更できます。 JS を介して要素を取得します。

1. element.style インライン スタイル操作
2. element.className クラス名スタイル操作

注意：
1.JS 里面的样式采取驼峰命名法比如fontSize、 backgroundColor
2.JS 修改style 样式操作，产生的是行内样式，CSS 权重比较高

操作要素は DOM の中心的なコンテンツです。

4.5 排他的思考

同じグループの要素があり、特定の要素に特定のスタイルを実装したい場合は、ループ排他アルゴリズムを使用する必要があります。つまり、

1. すべての要素のスタイルをクリアし (他のユーザーを削除し)
2. 、現在の要素のスタイルを設定します (
順序を逆にすることはできないので注意してください
3. 。
4. 最初に他の人を殺し、次に自分を設定します。

4.6 カスタム属性の操作

1. 属性値の取得

• element.property 属性値を取得します。
• element.getAttribute('attribute');

違い:

• element.attribute は、組み込みの属性値 (要素自体に付属する属性) を取得します。
• element.getAttribute('attribute'); によってカスタマイズされた属性 (標準) を取得します。プログラマーのプロパティ

2. プロパティ値を設定します

• element.property = 'value' 組み込みプロパティ値を設定します。
• element.setAttribute('Attribute', 'Value');

違い:

• element.Attribute は組み込みの属性値を設定します
• element.setAttribute('Attribute');

3. 属性を削除します

• element.removeAttribute(' プロパティ');

4.7 H5 カスタム プロパティ

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

カスタム属性は getAttribute('attribute') を通じて取得されます。
ただし、一部のカスタム属性はあいまいさを引き起こしやすいため、それらが組み込み属性であるか要素のカスタム属性であるかを判断するのが困難です。

H5 は新しいカスタム属性を追加しました:

1. H5 カスタム属性を設定します

。H5 では、カスタム属性データの先頭を属性名として使用し、値を割り当てる必要があると規定しています。

または、JS を使用して

element.setAttribute('data-index', 2)

2. H5 カスタム属性を取得します。 <br/> 互換性 Get element.getAttribute('data-index');
H5 では、element.dataset.index または element.dataset['index'] が追加されました。これは、IE 11 でのみサポートされます。

5. ノード操作

は、通常、要素を取得するために 2 つの方法が使用されます。
1. DOM が提供するメソッドを使用して要素を取得します

• document.getElementById()
• document.getElementsByTagName()
• document.querySelector など  ロジックが強くなく面倒

2. ノードの階層関係を使用して要素を取得します

• 。要素を取得するための -child-sibling ノード関係。
• ロジックは強力ですが、互換性は少し劣ります。

メソッド

も後で使用する要素ノードを取得できますが、ノードの操作はより単純です

。

ノード (ラベル、属性、テキスト、コメントなど)。DOM では、ノードを使用して表現します。
HTML DOM ツリー内のすべてのノードには JavaScript を介してアクセスでき、すべての HTML 要素 (ノード) を変更、作成、または削除できます。

一般に、ノードには少なくとも 3 つの基本属性、nodeType (ノード タイプ)、nodeName (ノード名)、nodeValue (ノード値) があります。

• 要素ノードのnodeTypeは1、
• 属性ノードのnodeTypeは2、
• テキストノードのnodeTypeは3です（テキストノードにはテキスト、スペース、改行などが含まれます）。

ノード

我们在实际开发中，节点操作主要操作的是元素节点

レベルで

は、DOM ツリーを使用してノードを分割します。最も一般的なのは、父子兄层级关系

1. 親ノード

node.parentNodeparentNode

プロパティ

• は、特定のノードの親ノードを返すことができます。
• 指定されたノードに親ノードがない場合は、null が返されます

。 childNodes (標準)

parentNode.childNodes は、指定されたノードの子ノードのコレクションを返します。これは、即時に更新されるコレクションです。
注: 戻り値には、要素ノード、テキスト ノードなどを含むすべての子ノードが含まれます。
内部の要素ノードのみを取得したい場合は、特別に処理する必要があります。 したがって、通常は childNodes

var ul = document.querySelector('ul');for(var i = 0; i < ul.childNodes.length;i++) {if (ul.childNodes[i].ノードタイプ == 1 ) {
 // ul.childNodes[i] は要素ノード console.log(ul.childNodes[i]);}}

2. parentNode.children (非標準)

parentNode.children は、すべての子要素ノードを返す読み取り専用プロパティです。子要素ノードのみが返され、他のノードは返されません (これが私たちが焦点を当てている点です)。
Children は非標準ですが、さまざまなブラウザでサポートされているため、

3. parentNode.firstChild

firstChild を安全に使用して最初の子ノードを返すか、見つからない場合は null を返すことができます。同様に、すべてのノードが含まれます。

4. parentNode.lastChild

lastChild は、最後の子ノードを返します。見つからない場合は null を返します。同様に、すべてのノードも含まれます

5. parentNode.firstElementChild

firstElementChild は最初の子要素ノードを返し、見つからない場合は null を返します。

6. parentNode.lastElementChild

lastElementChild は、最後の子要素ノードを返します。見つからない場合は null を返します。
注意：这两个方法有兼容性问题，IE9 以上才支持

実際の開発では、firstChild と lastChild には他のノードが含まれているため、操作が不便です。また、firstElementChild と lastElementChild には互換性の問題があります。要素ノードまたは最後の子要素ノードはどうですか?
解決策:

parentNode.chilren[parentNode.chilren.length - 1]

1. を
2. 使用できます

概要

ドキュメント オブジェクト モデル (ドキュメント)オブジェクト モデル (略して DOM) は、拡張可能なマークアップ言語 (HTML または XML) を処理するために W3C 組織によって推奨されている標準プログラミング インターフェイスです。

W3C は、Web ページのコンテンツ、構造、スタイルを変更できる一連の DOM インターフェイスを定義しました。

JavaScript の場合、JavaScript が HTML を操作できるようにするために、JavaScript には独自の DOM プログラミング インターフェイスのセットが用意されています。

HTML の場合、DOM は HTML を DOM ツリー形式にします。

ドキュメント、要素、ノードを含む DOM 要素はオブジェクトであるため

、DOM の操作に関しては主に要素の操作に焦点を当てます。主に作成、追加、削除、変更、クエリ、属性操作、イベント操作が含まれます。