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

JavaScript dom プログラミングについて一緒に学び、実践的な経験をメモに記録します

php是最好的语言オリジナル: 2018-07-27 15:41:371299ブラウズ

最近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 段落を挿入します:
a5fdcf67963356bc388e8ab959c1fe2594b3e26ee717c64999d7867364b1b4a3
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 プログラミングについて一緒に学び、実践的な経験をメモに記録します

関連記事