記事の冒頭で、 DOM とは何か、BOM とは何かという一般的な用語について触れておきたいと思います。この記事は最終的に、JavaScript の基礎はあるものの、DOM と BOM については理解していない、または知らない友人を対象としているからです。 。
ただし、 DOM とは何か、BOM とは何かについて説明する前に、 JavaScript の構造全体をお見せしたいと思います。
上の図では、 JavaScript、ECMAScript、DOM、BOM という 4 つの要素があることがわかります。では、これら 4 つの要素の間にはどのような関係があるのでしょうか。式を使用してそれらの間の関係を要約します:
JavaScript = ECMAscript + BOM + DOM
それらの概要を 1 つずつ説明しましょう:
ECMAscript:
ECMAScript は、ECMA International (旧欧州コンピュータ製造者協会) によって ECMA-262 を通じて渡された言語です。標準化されたスクリプト プログラミング言語。これは JavaScript (略して JS) の標準であり、ブラウザはこの標準を実装します。
ECMAscript は、JavaScript がブラウザ上で実行されるスクリプト言語であることがわかっているため、各ブラウザが JavaScript の構文を実行する方法を規定する規則に近いものです。規定はありますが、ページ上の各要素を操作する方法がまだ不足しています。この時点で、次のような DOM が誕生しました。
DOM:
DOM ( Document Object Model ) は、 xml および html ドキュメントを操作するための言語に依存しないアプリケーション プログラミング インターフェイスです。
JavaScript の場合: JavaScript で Html を操作できるようにするために、 JavaScript には独自の DOM プログラミング インターフェイスがあります。
一言で言うと: DOM は JavaScript に HTML 要素にアクセスして操作するための「メソッド」を提供します(インターフェースという言葉を使用しない理由は、インターフェースを見たときに怖がる人がいるのではないかと心配しているためですが、実際には最も正確な説明は JavaScript) インターフェイスが提供されます)
BOM:
BOM はブラウザ オブジェクト モデル、ブラウザ オブジェクト モデルです。 BOM は、ブラウザの動作を制御するインターフェイスです。
JavaScript の場合: JavaScript がブラウザの動作を制御できるようにするために、 JavaScript には独自の BOM インターフェイスがあります。
一言で言えば、 BOM はブラウザの動作を制御するための「メソッド」を JavaScript に提供します。
最後に、JavaScript の上記 3 つのコンポーネントのうち、 ECMscript は仕様であり、残りの 2 つはそれぞれ HTML 要素とブラウザに対応する「メソッド」を提供するため、以下では後者の 2 つである DOM と BOM に焦点を当て、体系的に説明します。初心者向けなので、基礎がしっかりしていない方でも安心して食べていただけます。
まず、 DOM の関連知識を2 つの部分に分けて説明します。
さて、 DOM ツリーとは何ですか?
DOM を学習した初心者の中には、この言葉に馴染みのない人もいるかもしれませんが、実際には、DOM ツリーは特に空想的なものではありません。逆に、フロントエンド スタッフにとって、 DOM ツリーは処理するページの HTML です。毎日、ツリーは次の要素で構成されます。
BOM ツリーでは、各ノードは 2 つの ID を持つことができます。親ノードの子ノードになることも、他の子ノードの親ノードになることもできます。次のコードを一緒に見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<頭>
<meta charset="UTF-8">
<title>DOM_デモ</title>
</head>
<本文>
<p>
<a href="https://blog.csdn.net/qq_52736131">タンゴを踊るザリガニ</a>
</p>
</body>
</html>上記のコードの場合、 DOM ツリーは次のようになります。
ここで、これほど長い間 DOM ツリーが HTML 要素の操作に関係していると思う人がいると思います。
答えは非常に重要であり、ドキュメントの DOM ツリー構造を理解することによってのみ、DOM 要素を正確かつ効果的に操作することができます。そうでないと、さまざまな予期せぬバグが発生します。ページの HTML 要素を操作する前に、実際に描画していなくても、ページ全体の DOM を明確に描画しておく必要があります。
JavaScript で DOM の HTML 要素を操作する一般的な方法について、いくつかのサブパートに分けて紹介します。
// 1. Pass Get要素の id 属性値を返し、要素オブジェクトを返します。 var element = document.getElementById(id_content) //2. name 属性値を通じて要素を取得し、要素オブジェクトの配列を返します。 var element_list = document.getElementsByName(name_content) //3. 要素のクラス属性値を通じて要素を取得し、要素オブジェクトの配列を返します。 var element_list = document.getElementsByClassName(class_content) //4. タグ名を通じて要素を取得し、要素オブジェクトの配列を返します。 var element_list = document.getElementsByTagName(tagName)
//1. 渡されるパラメータは、当然、class、id、href などの属性名です。 var attr = element.getAttribute(属性名) //2. 要素の属性値を設定します。渡されるパラメータは当然、要素の属性名と、設定される対応する属性値です。 element.setAttribute(attribute_name,attribute_value)
//1. html 要素を作成します。渡されるパラメーターは、p、h1-5、a などの要素タイプです。以下では p を例にします。 var element = document.createElement( "p") //2. テキスト ノードを作成し、対応するテキスト コンテンツを渡します (これは HTML 要素ではなくテキスト ノードであることに注意してください)。 var text_node = document.createTextNode(テキスト) //3. 属性ノードを作成します。渡されるパラメーターは対応する属性名です。var attr_node = document.createAttribute(attribute_name) element.setAttributeNode(attr_node)
属性ノードを作成するこのメソッドは、特定の element と一致する必要があります。つまり、最初に特定の element 要素を取得し、属性ノードを作成し、最後にこれを追加する必要があります。この要素の属性ノード ( setAttributeNode) 。
//1. 要素の末尾にノードを追加します。渡されるパラメーターはノード タイプ element.appendChild(Node) です。 //2. 要素内の既存のノードの前にノードを挿入し、ノード タイプ パラメータ element.insertBefore(new_Node,existing_Node) を渡します。
ノードを追加する前に、最初にノードを作成する必要があります。同時に親ノード要素を選択します。2番目の方法では、挿入位置の後ろにある兄弟ノードも見つける必要があります。
//要素内のノードを削除します。渡されるパラメータはノード タイプ パラメータ element.removeChild(Node) です。
削除する場合、スムーズに削除するには、対応する親ノード要素を見つける必要があります。
最後に、いくつかの一般的な DOM 属性:
//1. 現在の要素の親ノードを取得します。 var element_father = element.parentNode //2. 現在の要素の HTML 要素タイプの子ノードを取得します var element_son = element.children //3. HTML 要素、テキスト、属性を含む、現在の要素のすべてのタイプの子ノードを取得します。 var element_son = element.childNodes //4. 現在の要素の最初の子ノードを取得します。var element_first = element.firstChild //5. 現在の要素の前の兄弟要素を取得します var element_pre = element.previousSibling //6. 現在の要素の次の兄弟要素を取得します var element_next = element.nextSibling //7. HTML ソース コードとテキストを含む、現在の要素のすべてのテキストを取得します。 var element_innerHTML = element.innerHTML //8. HTML ソースコードを除く現在の要素のテキストをすべて取得します。 var element_innerTEXT = element.innerText
このうち7 番目は、 HTML コードと要素内のテキスト、および元の HTML コードをテキストに変換することを意味します。が実行されると、それをテキストに変換することは、通常の文字列に変換することと同じになります。
次に、BOM については再度説明します。紙面の都合上、BOM については詳しく説明しません(実用性は DOM ほどではありません)。冒頭のBOM についての概要を確認しましょう。BOM
は、JavaScript がブラウザを操作するためのいくつかの「メソッド」を提供します。
まず、図を使用して、DOM と同様に、BOM にもツリー構造があります。
上の図から、次のことがわかります。
window は BOM ツリー全体の食物連鎖の最上位であるため、新しく開かれたすべてのウィンドウは window オブジェクトとみなされます。
ウィンドウ オブジェクトには、次の共通のプロパティとメソッドがあります。
| プロパティ/メソッド | 意味 |
| opener | 現在のウィンドウの親ウィンドウ |
| 長さ | ウィンドウ ドキュメント内のフレーム数 |
| ウィンドウ | に現在表示されているドキュメント オブジェクト |
| alter(string) | 警告ダイアログ ボックスを作成し、メッセージを表示します |
| close() | ウィンドウを閉じます |
| verify() | ユーザー確認を必要とするダイアログ ボックスを作成します |
| open(url, name, [options]) | 新しいウィンドウを開き、新しいウィンドウ オブジェクトを |
| 返し | ますユーザーが情報を入力する必要がある |
| setInterval(expression, milliseconds) | は、指定された時間間隔の後に式を計算します |
| setInterval(function, millis enconds, [arguments]) は | 、指定された時間間隔の後に関数 setTimeout(expression, milli Seconds) を呼び出し |
| setTimeout(式, ミリ秒 | |
| ) | タイマーの期限切れ後 | タイマーの期限切れ後の関数を計算します。 |
その中には、上記の関数alert()があることがわかります。私たちは、alert() 関数のポップアップ ウィンドウを入出力ストリームとして使用します。これは私の最初のデモなので、これを見たとき、
次のように
疑問に思うかもしれません。では、ここでのalert()は、前に学んだalert()と同じでしょうか？答えは次のとおりです:
これら2 つのalert() は実際には同じ関数です。 window を省略できる理由は、window のすべてのプロパティとメソッドが 2 つの方法で表現できるためです:
(1) window.property/window.
(2) 直接の属性/メソッド () 呼び出しは、
alert() だけではなく、上記のウィンドウ属性と関数はすべて有効です。興味のある友人は自分で試してみることができます。
位置オブジェクトとは何ですか?
location オブジェクトは、現在のウィンドウにロードされているドキュメントに関する情報を提供するウィンドウ オブジェクトの属性であり、いくつかのナビゲーション機能も提供します。
location オブジェクトには、次の共通の属性とメソッドがあります。
| 属性/メソッドの | 内容 |
| host | ホスト名: ポート番号 |
| hostname | ホスト名 |
| href | URL 全体 |
| パス名 パス | 名 |
| ポート ポート | 番号 |
| プロトコル プロトコル | 部分 |
| 検索 | クエリ文字列 |
| repalce() | を使用して |
| 現在 | の URL をリロードします |
| 新しい URL が現在のページを置き換えます。 |
実際、上記の構造図を注意深く観察すると、
場所オブジェクトがウィンドウ オブジェクトの属性であるだけでなく、ドキュメント オブジェクトの属性でもあることがわかります。
これは次のことを意味します:
window.location = location = document.location
履歴オブジェクトとは何ですか?
履歴オブジェクトはウィンドウ オブジェクトの属性であり、ユーザーのインターネット アクセスの記録が保存されます。このレコードのタイムスタンプはウィンドウが開かれた瞬間から計算されます。
履歴オブジェクトには、次の共通の属性とメソッドがあります。
| 属性/メソッドの | 説明の |
| 長さ | 履歴オブジェクト内のレコードの数 |
| forward () は | 次の URL に移動するの |
| と | 同様です |
| ブラウザ履歴エントリの、「go | |
| forward (num)」 | に似ています。ブラウザは履歴オブジェクト内で前方または後方に移動します。 |
最後に、ナビゲーターオブジェクトを紹介します。
ナビゲーター オブジェクトは、クライアント ブラウザーを識別する BOM 内のウィンドウ属性です。
ナビゲーターに関連するいくつかの一般的な属性は次のとおりです。
| 属性 | の説明 |
| appName | ブラウザーの完全な名前とバージョン情報 |
| platform | システム ブラウザーが |
| plugins | ブラウザーにインストールされているプラグイン情報の配列 |
| userAgent | ブラウザーのユーザー エージェント文字列 |
| userLanguage | オペレーティング システムのデフォルト言語 |