
完全な 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 ドキュメントを処理するために使用できます。サイズが大きいため、すべてをメモリ内で処理するのには適していません。

実際の開発ではDOM
DOM 把以上内容都看做是对象
ページ内の要素を取得するにはどうすればよいですか? 次の方法でページ内の要素を取得できます:
getElementById()メソッドを使用して、ID付きの要素オブジェクトを取得します。
document.getElementById('id'); console.dir() を使用して、取得した要素オブジェクトを出力し、オブジェクト内のプロパティとメソッドをよりよく確認します。
getElementsByTagName() メソッドを使用して、指定されたタグ名を持つオブジェクトのコレクションを返します。
document.getElementsByTagName('タグ名');注:
。 // クラス名に従って要素オブジェクトのコレクションを返します。 document.querySelector('selector'); // に従って返します。指定されたセレクター 最初の要素オブジェクト document.querySelectorAll('selector'); // 指定されたセレクターに従って返されます注意:
querySelector および querySelectorAll のセレクターは、次のようにマークする必要があります。 document.querySelector('#nav');
1. body 要素を取得する
doucumnet.body // body 要素オブジェクトを返す
2. html 要素を取得する
document.documentElement // html 要素オブジェクトを返す
JavaScript で有効になる動的ページを作成するのは私たちであり、イベントは JavaScript によって検出できる動作です。简单理解: 触发--- 响应机制。
Web ページ内の各要素は、JavaScript をトリガーできる特定のイベントを生成できます。たとえば、ユーザーがボタンをクリックしたときにイベントを生成し、特定の操作を実行できます。
case:
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('調子はどうですか');
3.3注:以下图片的事件只是常见的并不代表所有
。
1. イベントソース (何を操作したいのか)
2. イベント (望ましいインタラクション効果を達成するために何をしたいのか)
3. 処理関数 (イベントが進行した後にターゲットをどのように見せたいのか)
JavaScript DOM 操作では、Web ページのコンテンツ、構造、スタイルを変更できます。DOM 操作要素を使用して、要素内のコンテンツ、属性などを変更できます。以下はすべて属性であることに注意してください
element.innerText を
開始位置から終了位置に変更しますが、同時に、スペースと改行も
開始位置からコンテンツ全体を
削除します。 4.2 要素の内容を変更するための
innerText および innerHTML
ソース、href
id、alt、title
DOM を使用して、次のフォーム要素の属性を操作できます:
type、value、checked、selected、disabled
サイズ、色、位置、その他のスタイルを変更できます。 JS を介して要素を取得します。
注意:
1.JS 里面的样式采取驼峰命名法比如fontSize、 backgroundColor
2.JS 修改style 样式操作,产生的是行内样式,CSS 权重比较高
操作要素は DOM の中心的なコンテンツです。 

同じグループの要素があり、特定の要素に特定のスタイルを実装したい場合は、ループ排他アルゴリズムを使用する必要があります。つまり、
1. 属性値の取得
違い:
2. プロパティ値を設定します
違い:
3. 属性を削除します
自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
カスタム属性は 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 でのみサポートされます。
は、通常、要素を取得するために 2 つの方法が使用されます。
1. DOM が提供するメソッドを使用して要素を取得します
2. ノードの階層関係を使用して要素を取得します
メソッド
も後で使用する要素ノードを取得できますが、ノードの操作はより単純です
ノード (ラベル、属性、テキスト、コメントなど)。DOM では、ノードを使用して表現します。
HTML DOM ツリー内のすべてのノードには JavaScript を介してアクセスでき、すべての HTML 要素 (ノード) を変更、作成、または削除できます。

一般に、ノードには少なくとも 3 つの基本属性、nodeType (ノード タイプ)、nodeName (ノード名)、nodeValue (ノード値) があります。
我们在实际开发中,节点操作主要操作的是元素节点
は、DOM ツリーを使用してノードを分割します。最も一般的なのは、父子兄层级关系
1. 親ノード
node.parentNodeparentNode
プロパティ
。 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]);}}
- parentNode.children (非標準)
parentNode.children は、すべての子要素ノードを返す読み取り専用プロパティです。子要素ノードのみが返され、他のノードは返されません (これが私たちが焦点を当てている点です)。
Children は非標準ですが、さまざまなブラウザでサポートされているため、
- parentNode.firstChild
firstChild を安全に使用して最初の子ノードを返すか、見つからない場合は null を返すことができます。同様に、すべてのノードが含まれます。
- parentNode.lastChild
lastChild は、最後の子ノードを返します。見つからない場合は null を返します。同様に、すべてのノードも含まれます
- parentNode.firstElementChild
firstElementChild は最初の子要素ノードを返し、見つからない場合は null を返します。
- parentNode.lastElementChild
lastElementChild は、最後の子要素ノードを返します。見つからない場合は null を返します。注意:这两个方法有兼容性问题,IE9 以上才支持
実際の開発では、firstChild と lastChild には他のノードが含まれているため、操作が不便です。また、firstElementChild と lastElementChild には互換性の問題があります。要素ノードまたは最後の子要素ノードはどうですか?
解決策:
parentNode.chilren[parentNode.chilren.length - 1]
ドキュメント オブジェクト モデル (ドキュメント)オブジェクト モデル (略して DOM) は、拡張可能なマークアップ言語 (HTML または XML) を処理するために W3C 組織によって推奨されている標準プログラミング インターフェイスです。
W3C は、Web ページのコンテンツ、構造、スタイルを変更できる一連の DOM インターフェイスを定義しました。
JavaScript の場合、JavaScript が HTML を操作できるようにするために、JavaScript には独自の DOM プログラミング インターフェイスのセットが用意されています。
HTML の場合、DOM は HTML を DOM ツリー形式にします。
ドキュメント、要素、ノードを含む DOM 要素はオブジェクトであるため
、DOM の操作に関しては主に要素の操作に焦点を当てます。主に作成、追加、削除、変更、クエリ、属性操作、イベント操作が含まれます。 