JavaScript の DOM

ドキュメント オブジェクト モデル (DOM)

DOM API は、Web ドキュメント用のプログラミング インターフェイスです。これはページを表し、プログラムがドキュメントの構造、スタイル、コンテンツを変更できるようにします。

DOM はドキュメントをオブジェクトのツリーとして表し、各オブジェクトはページの一部を表します。

JavaScript での DOM 操作

JavaScript で DOM を実装する場合は、次の基本知識を考慮することができます。

1. querySelector: これは貪欲なセレクターです。最初に指定された要素を選択します。

例:

querySelector("h1")

これにより、HTML ドキュメント全体の最初の h1 要素が検索されます

2. querySelectorAll: これは、HTML ドキュメント内のすべての h3 要素を対象とします。

例:

querySelectorAll("h3")

これらはコンソールにノードのリストとして出力されます。

注: ノード リストは配列のように見えますが、大きな違いがあります

ノード リストはブラウザ API であり、配列は JavaScript API です。 つまり、ノード リストは JavaScript に属さないため、ノード リストにループを実装することはできません。

また、getElementbyTagName() と querySelectorAll は JavaScript メソッドではなく、ブラウザー API です。

innerHTML と innerText

他人によるスクリプトの変更を制限するため、innerText の代わりに innerHTML を使用することをお勧めします。

要素を配置するメソッド

• ドキュメント内で操作する要素を見つけたり選択したりする方法はたくさんあります。

これらのメソッドには次のものが含まれます:

ID別 名前で クラス別 タグで タグ名別

注: ブラウザから何かを選択するために ID と クラス を使用することはありません。

したがって、querySelector を使用します。

JavaScript の主要な概念。

a) ホイスティング: この点を説明するために例を使用しましょう。

例:

1. console.log(a);
2. 変数;
3. a = 5;
4. console.log(a);

コンソールで実行すると、1 行目の a は 未定義 として出力されます。

これは、最初に明示的に宣言していなくても、ブラウザ内で「魔法のように」宣言されたことを意味します。これはホイスティングと呼ばれます。

通常、4 行目では、a が明示的に初期化されているため、出力は 5 になります。

b) クロージャー: 関数が作成されるたびにクロージャーが作成されます。

c) グローバル実行コンテキスト : グローバル実行コンテキストは、関数内にないときに JavaScript コードが実行される環境です。

d) コールスタック: スクリプトが関数を呼び出すと、インタープリターはそれをスタックに追加し、関数の実行を開始します。

私の GitHub リンク LinkedIn

以上がJavaScript の DOMの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。