ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript DOMの本質と操作方法
JavaScript DOMの本質と操作方法
- 高洛峰オリジナル
- 2016-11-28 10:43:161331ブラウズ
jQuery、Prototype、MooTools などの一部の JavaScript フレームワークは、フロントエンドの開発効率を向上させ、ブラウザーの互換性の問題をうまく解決できますが、それでも JavaScript テクノロジーの優れた基盤を築く必要があります。この記事では、JavaScript とドキュメント オブジェクト モデル (DOM) の本質を紹介します。
JavsScript は、さまざまな環境で使用できる、動的で緩やかに型付けされたプロトタイプベースのプログラミング言語です。人気のある Web クライアント プログラミング言語であることに加えて、IDE プラグイン、PDF ファイル、または他のプラットフォームのより抽象的な概念にも使用できます。
JavaScript は、Netscape の Brendan Eich によって作成された ECMAScript 標準 (ECMA-262) に基づいた言語です。当初は LiveScript という名前でしたが、後に JavaScript に変更されました。これが、多くの人がこれを Java と混同する理由の 1 つです。以下に、その機能の一部を詳しく説明します。
◆動的プログラミング言語は、コンパイルされずに実行時に実行されます。このため、JavaScript は真のプログラミング言語ではなく、スクリプト言語とみなされることがあります (明らかに誤解です)。
◆緩やかに型付けされた言語では、強力な型システムは必要ありません。C または Java プログラミングを使用する場合 (JavaScript とは異なり)、変数を宣言するときに、「int」(整数) のようなものを宣言する必要があることがわかります。 JavaScript との違いは、その型を指定する必要がないことです。
◆JavaScript では、継承と同様の効果を実現するためにプロトタイプを使用します。JavaScript はクラスをサポートしていません。
◆JavaScriptも関数型言語であり、関数を優先オブジェクトとして扱います。ラムダの概念に基づいています。
上記の概念を理解することは、JavaScript テクノロジーの学習にはあまり関係ありません。これは、JavaScript と JavaScript と他のプログラミング言語の本質的な違いについて、予備的かつ正確に誰もが理解できるようにするだけです。
ドキュメント オブジェクト モデル
ドキュメント オブジェクト モデル (ドキュメント オブジェクト モデル) は通常 DOM と呼ばれ、Web サイトのコンテンツと JavaScript の間のインターフェイスです。 JavaScript が最も一般的に使用される言語になって以来、JavaScript と DOM は別個のエンティティとして扱われることがよくあります。 DOM インターフェイスは、HTML および XML ドキュメントへのアクセス、走査、および制御に使用されます。
DOM について知っておくべき重要な点がいくつかあります:
◆Window オブジェクトはグローバル オブジェクトなので、アクセスするには「window」を使用するだけです。 Window オブジェクトには、実行されるすべての JavaScript コードが含まれています。すべてのオブジェクトにプロパティとメソッドが含まれているのと同じように。
◆属性とは、オブジェクトの下に格納される変数です。 Web ページで作成されたすべての変数は、ウィンドウ オブジェクトのプロパティになります。
◆メソッドとは、オブジェクトの下に格納される関数です。すべての関数は window オブジェクトの下に保存されますが、「メソッド」を使用してそれらを参照できます。
◆DOMはWeb文書構造に対して階層構造を作り、その階層はノードで構成されます。 DOM ノードにはさまざまなタイプがありますが、その中で最も重要なものは「Element」、「Text」、「Document」です。
◆「Element」ノードはページ内の要素を表すため、ページ内に段落要素 (「e388a4556c0f65e1904146cc1a846bee」) がある場合は、DOM ノードを通じてアクセスできます。
◆「テキスト」ノードはページ内 (要素内) のすべてのテキストを表すため、ページの段落にテキスト コンテンツがある場合は、DOM ノードを通じてアクセスできます。
◆「Document」ノードはドキュメント全体を表します。 (DOMツリーのルートノードです)
◆ 要素の属性はDOMノードそのものであることにも注意してください。
◆レイアウト エンジンが異なると、DOM 標準の実行に特定の違いがあります。たとえば、Gecko レイアウト エンジンを使用する FireFox ブラウザは良好なパフォーマンスを発揮しますが (ただし、W3C 仕様に完全には準拠していません)、Trident エンジンを使用する IE は多くのバグと DOM 標準の実装が不完全であることで知られています。これはフロントエンド開発における問題点の 1 つです。
Web ページの JavaScriptScript 要素
Web サイトで JavaScript を使用したい場合は、それらを script 要素に含める必要があります:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.php.cn">
<html xmlns="http://www.php.cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript!</title>
</head>
<body>
<script type="text/javascript">
// <![CDATA[
// ]]>
</script>
</body>
</html>ドキュメントの下にあるように、script 要素があります。本当は厳密にはtype属性を「application/javascript」にするべきなのですが、さすがにIEブラウザではうまく動作しないので、気になる場合は「text/javascript」を使うか、type属性を使わないようにしています。コード W3C 仕様の検証について その場合は前者（「text/javascript」）を使用することをお勧めします。
script 要素内には、XHTML 対応ブラウザに script 要素内のコンテンツが文字データであり、XHTML マークアップとして解釈すべきではないことを伝える、コメントアウトされたコード行のペアがあることにも気づくでしょう。これは、JavaScript コードで「72f26f35265c121de8f248a13afc7983」文字を使用する場合に必要です。もちろん、通常の HTML コードを使用している場合は、完全に無視できます。
defer 属性
script 要素内の JavaScript コードは、ページ読み取りプロセス中に実行されます。唯一の例外は、script 要素に defer 属性がある場合です。デフォルトでは、ブラウザーはスクリプト要素を検出すると、ドキュメントの解析を続行する前にコードを停止して実行します。 defer 属性は、コードに文書化されていないコードが含まれており、後で実行できることをブラウザーに伝えます。唯一の問題は、IE でのみ使用できることなので、使用せずに理解するように努める必要があります。
外部スクリプトをリンクする
外部スクリプト ファイルに接続する場合は、ファイル アドレスを含む src 属性をスクリプト要素に追加するだけです。スクリプト ファイルを分離して独立して呼び出すことは、インライン スクリプトよりも確かに優れたアイデアです。これは、ブラウザがファイルをキャッシュできるため、CDATA のナンセンスについて心配する必要がないことを意味します。
2f34f031b3620238f37bc8100a7d9b972cacc6d41bbb37262a98f745aa00fbf0 JavaScript の基本事項
DOM について話し続ける前に、JavaScript の基本事項を学ぶ必要があります。何かある場合は、少しわかりにくいですが、心配しないでください。遅かれ早かれわかります。 JavaScript にはさまざまなタイプの値があり、それらは数値、文字列、ブール値、オブジェクト、未定義、Null です。単一行のコメントには 2 つのスラッシュ (//) が使用され、この行内のすべてがコメントの内容として理解されます。複数行のコメントは、「/*」と「*/」を使用してコメント段落を完成させます。
数値
JavaScript では、すべての数値は浮動小数点値として表されます。数値変数を定義するときに引用符を使用しないように注意してください。
// 注意: 変数を宣言するには常に 'var' を使用してください: var leftSide = 100;
var topSide = 50;
var areaOfRectangle = leftSide * topSide; // = 5000
String
定義する文字列はすべてリテラルです。 JavaScript はそれを処理できません。文字列は、二重引用符または一重引用符のペアで囲まれた一連の Unicode 文字で構成されます。
var firstPart = 'Hello'; var SecondPart = 'World!';
var allOfIt = firstPart + ' ' + SecondPart; // Hello World!
// (これも使用できます) (数学における加算演算用)
ブール値
var Verytired = true
// 次のようにテストできます:
if (verytired) {
// コード
}
上に表示されている「===」は比較演算子ですが、これについては後で説明します。
// 関数のコードは次のとおりです
}
// 関数名を省略すると、「匿名関数」が作成されます:
function(arg1, arg2) {
// 関数のコードは次のとおりです
}
// 関数を実行するには、関数を参照し、括弧を使用するだけです (パラメータ付き):
myFunctionName(); / パラメータなし
myFunctionName('foo', 'bar'); // パラメータあり
// 変数を宣言せずに関数を実行することもできます
(function(){
// これはいわゆる self-匿名関数の呼び出し
})();
Array
var Fruit = ['apple', 'lemon', 'banana'];
// 配列コンストラクターの使用:
var Fruit = new Array( 'apple ', 'lemon', 'banana');
fruit[0]; // 配列の最初のデータ項目にアクセスします (apple)
fruit[1]; // 配列の 2 番目のデータにアクセスします (レモン)
fruit[2]; // 配列 (バナナ) の 3 番目のデータ項目にアクセスします
Object
// リテラル (中括弧):
var profile = {
name: 'Li',
age: 23,
job: 'Web Developer'
};適用可能なオブジェクト コンストラクター:
var profile = new Object();
profile.age = 23;
if/else ステートメント
ifステートメントは JavaScript で最も一般的な構造です:
varlegalDrinkingAge = 21; var yourAge = 23;