検索
ホームページウェブフロントエンドjsチュートリアルJavaScript dom プログラミングについて一緒に学び、実践的な経験をメモに記録します

最近JavaScriptのdomプログラミングを勉強しているのですが、今後忘れてしまいそうなので特別にまとめて整理しました dom操作とは?ドキュメント オブジェクト モードは w3c 標準です。

1.JavaScript は、Web ページをインタラクティブにするプログラミング言語です。

2. ブラウザーのプロパティのプロパティを設定するメソッドは、BOM と呼ばれます。

3. 関数名、メソッド名、オブジェクト属性名の推奨される命名形式は、キャメルケースです。

4. 変数に名前を付ける場合は、アンダースコアを使用して各単語を区切ることができ、関数に名前を付ける場合は、キャメルケースの名前を使用します。

5. 関数は自己完結型のスクリプトのように動作する必要があります。関数を定義するときは、そのすべての内部変数をローカル変数として明示的に宣言する必要があります。

6. ブラウザによって事前に定義されたオブジェクトはホスト オブジェクトと呼ばれます。ホスト オブジェクトには、From、Image、document などが含まれます。

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

8. DOM には要素ノード (ラベル) (ドキュメント内の各要素はオブジェクト)、テキスト ノード (コンテンツ)、および属性ノード (属性) があります。

9. このタグがドキュメント全体に要素を 1 つしか持たない場合でも、getElementsByTagName は配列を返し、配列の長さは 1 です。

10.getElementsByClassName は、同じクラス名を持つ要素の配列を返します。

11. getElemntsByClassName を使用して複数のクラス名を指定する場合、パラメータ内で複数のクラス名をスペースで区切るだけで済みます

12.getElementsById は、ドキュメント内の特別な要素ノードに対応するオブジェクトを返します

13. getAttribute 関数と setAttribute 関数はどちらも要素ノードに対してのみ使用できます。

14. DOM 作業モード: 最初にドキュメントの静的コンテンツを読み込み、それから動的に更新します。ページのコンテンツを更新しても、ブラウザでページを更新する必要はありません。

15. 要素にイベント処理関数を追加すると、イベントが発生すると、対応する JavaScript コードが実行されます。呼び出された JavaScript コードは値を返すことができ、その値はイベント ハンドラーに渡されます。 a タグにイベント処理関数が指定されているとします。 onclick この関数が true を返した場合、onclick イベントは a タグ内のリンクがクリックされたとみなします。 false を返した場合は、リンク 2 がクリックされたと見なされます。クリックされていません。したがって、a タグでデフォルトの動作をトリガーしたくない場合は、onclick に return false を追加します。

<li><a href="img/1.png" onclick="showpic(this);return false;">1</a> </li>

16. childNodes 属性は、この要素のすべての子要素を含む配列です。

17. ノードのタイプを知りたい場合は、nodeType を使用してノード タイプを表示できます
nodeType=1 ノードは要素ノードです

           =2            属性节点
           =3            文本节点

18.window.open() は新しいブラウザ ウィンドウを開きます。

function popUrl(winURL) {
        window.open(winURL,"popup","width:320px,height:400px");
    }
    popUrl(&#39;canvas.html&#39;);

19. スムーズな劣化 (ブラウザが js コードをサポートしていない場合、Web ページの通常の機能には影響しません。)

20. パフォーマンスに関する考慮事項
(1) DOM へのアクセスは最小限に抑えます。一部の要素について DOM をクエリしている限り、ブラウザは DOM ツリー全体を検索して、一致する可能性のある要素を見つけます。つまり、getElementBy* が使用されるたびに DOM ツリー全体が走査されるため、要素を取得して変数に格納するには、getElementBy* を 1 回使用するのが最善です。
(2) タグの使用はできるだけ少なくする: 不要な要素が多すぎると、DOM ツリーのサイズが増加するだけであり、その結果、特定の要素を見つけるために DOM ツリーを走査するのにかかる時間が増加します。
(3) スクリプトを組み込む最良の方法は、外部ファイルを使用し、複数の js ファイルをマージすることです。これにより、ページの読み込み時に送信されるリクエストの数が減少します。
(4) ページを高速化するために、すべての Script タグをドキュメントの末尾、body タグの末尾より前に配置します。
(5) スクリプトの圧縮: ファイル圧縮の目的を達成するために、スクリプトテキスト内のスペースやコメントなどの不要なバイトをすべて削除します。

21. HTTP プロトコルの仕様により、ブラウザは同じ名前から同時に 2 つのファイルをダウンロードできます。

22. JavaScript を使用して Web ページに何らかの動作を追加する場合、JavaScript コードは Web ページの構造に依存しないようにする必要があります。

23. 関数に複数の exit がある場合、これらの exit を関数の先頭に配置します。

24. タグのグループがクリックされた後に実行される JS 処理を決定するループ

function prepareGallery() {
    if (!document.getElementById) return false;
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById(&#39;imagegallery&#39;)) return false;
    var gallery = document.getElementById(&#39;imagegallery&#39;);
    var links  = gallery.getElementsByTagName(&#39;a&#39;);
    for (var i = 0; i < links.length; i++){
        links[i].onclick = function () {
            showpic(this);
            return false;
        }
    }
}

25.addLoadEvent(): ページのロード時に処理する必要がある関数を追加する独自のスクリプト関数を作成します

function addLoadEvent(func) {
  var onload = window.onload;
  if (typeof window.onload !=func){
  window.onload = func;
  }else {
  window.onload = function (ev) {
  oldload();
  func();
  }
  }
}

26 .createTextNode はテキスト ノードを作成するために使用されます

var txt =  document.createTextNode("hello world");

27.js ドキュメントにコンテンツを挿入したい場合は、dom の観点から開始する必要があります。たとえば、p に p 段落を挿入します:


js に p を挿入したいです
var p = document.createElement("p");
var txt = document.creatTextNode(&#39;hello world&#39;);
var p = document.getElementById("myp");
p.appendChild(p);
p.appendChild(txt);

28.insertBefore(),: 要素の前に要素を挿入します。要素 ,

関連記事:

『JavaScript DOM プログラミング術』読書メモ

『JavaScript DOM プログラミング術』読書メモ - DOM の基礎_JavaScript スキル

関連ビデオ:

JavaScript&DOM ビデオチュートリアル

以上がJavaScript dom プログラミングについて一緒に学び、実践的な経験をメモに記録しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScript、C、およびブラウザの関係JavaScript、C、およびブラウザの関係May 01, 2025 am 12:06 AM

はじめに私はあなたがそれを奇妙に思うかもしれないことを知っています、JavaScript、C、およびブラウザは正確に何をしなければなりませんか?彼らは無関係であるように見えますが、実際、彼らは現代のウェブ開発において非常に重要な役割を果たしています。今日は、これら3つの間の密接なつながりについて説明します。この記事を通して、JavaScriptがブラウザでどのように実行されるか、ブラウザエンジンでのCの役割、およびそれらが協力してWebページのレンダリングと相互作用を駆動する方法を学びます。私たちは皆、JavaScriptとブラウザの関係を知っています。 JavaScriptは、フロントエンド開発のコア言語です。ブラウザで直接実行され、Webページが鮮明で興味深いものになります。なぜJavascrを疑問に思ったことがありますか

node.jsは、型を使用してストリーミングしますnode.jsは、型を使用してストリーミングしますApr 30, 2025 am 08:22 AM

node.jsは、主にストリームのおかげで、効率的なI/Oで優れています。 ストリームはデータを段階的に処理し、メモリの過負荷を回避します。大きなファイル、ネットワークタスク、リアルタイムアプリケーションの場合。ストリームとTypeScriptのタイプの安全性を組み合わせることで、パワーが作成されます

Python vs. JavaScript:パフォーマンスと効率の考慮事項Python vs. JavaScript:パフォーマンスと効率の考慮事項Apr 30, 2025 am 12:08 AM

PythonとJavaScriptのパフォーマンスと効率の違いは、主に以下に反映されています。1)解釈された言語として、Pythonはゆっくりと実行されますが、開発効率が高く、迅速なプロトタイプ開発に適しています。 2)JavaScriptはブラウザ内の単一のスレッドに限定されていますが、マルチスレッドおよび非同期I/Oを使用してnode.jsのパフォーマンスを改善でき、両方とも実際のプロジェクトで利点があります。

JavaScriptの起源:その実装言語の調査JavaScriptの起源:その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏:JavaScriptをパワーする言語は何ですか?舞台裏:JavaScriptをパワーする言語は何ですか?Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1)解析段階で抽象的構文ツリー(AST)を生成します。 2)ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3)実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来:傾向と予測PythonとJavaScriptの未来:傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript:開発環境とツールPython vs. JavaScript:開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1)Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2)JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか?証拠を調べるJavaScriptはCで書かれていますか?証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1)C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2)V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3)JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境