07.JavaScriptのDOM操作

6865 ワード
JavaScriptの詳細
BOMブラウザオブジェクトモデル
  • コンセプト:Browser Object Modelブラウザオブジェクトモデル:
    • ブラウザの各コンポーネントをオブジェクトにカプセル化します.
  • の構成:
  • Window:ウィンドウオブジェクト
  • Navigator:ブラウザオブジェクト
  • Screen:ディスプレイ画面オブジェクト
  • History:履歴オブジェクト
  • Location:アドレスバーオブジェクト

    • 1.Window:ウィンドウオブジェクト
    1.作成
  • Windowオブジェクトは作成する必要がなく、直接windowを使用することができます.window. ();
  • windowリファレンスは省略できます. ();

    • 2.方法
  • ポップアップボックスに関する方法:
  • alert():メッセージと確認ボタンが表示される警告ボックス.
  • confirm():メッセージと確認ボタンとキャンセルボタンのダイアログボックスが表示されます.
  • ユーザが確定ボタンをクリックすると、方法はtrue
    • に戻る.
  • ユーザがキャンセルボタンをクリックすると、メソッドはfalse
    • に戻る.
  • prompt():ユーザーに入力を求めるダイアログが表示されます.
  • 戻り値:ユーザ入力値
    • を取得する.

  • オープンクローズに関する方法:
  • close():ブラウザウィンドウを閉じます.
  • 誰が私を呼び出して、私は誰の
    • を閉じます
  • open():新しいブラウザウィンドウを開きます
  • は、新しいWindowオブジェクト
    • を返す

  • タイマに関する態様
  • setTimeout( , )は、指定されたミリ秒数後に関数または計算式を呼び出す.
  • パラメータ:jsコードまたはメソッドオブジェクト、ミリ秒値
  • 戻り値:タイマ
    • をキャンセルするための一意の識別子
  • clearTimeout( ):settimout()メソッドによって設定されたtimeoutをキャンセルします.
  • setInterval():関数または計算式は、指定された周期(ミリ秒)で呼び出されます.
  • clearInterval():setInterval()によって設定されたtimeoutをキャンセルします.

    • function func() { console.log("   ！") }
    var t = setInterval(func, 1000);

    function clo() { clearInterval(t) }
    setTimeout(clo, 5000);

    3.属性:
  • 他のBOMオブジェクトを取得します.
  • history
  • location
  • Navigator
  • Screen

  • DOMオブジェクトの取得
  • document


    • 2.Location:アドレスバーオブジェクト
  • 作成(取得):
  • window.location
  • location

  • メソッド:
  • location.reload():現在のドキュメントを再ロードします.更新
  • プロパティ
  • href:完全なURLを設定または返します.


    • 3.History:履歴オブジェクト
  • 作成(取得):
  • window.history
  • history

  • メソッド:
  • history.back():historyリストの前のURLをロードします.
  • history.forward():historyリストの次のURLをロードします.
  • history.go( ):historyリストの特定のページをロードします.パラメータは次のとおりです.
  • 正数:いくつかの歴史記録
    • を前進する
  • 負数:いくつかの履歴
    • を後退

  • プロパティ:
  • history.length:現在のウィンドウ履歴リストのURL数を返します.


    • 二、DOMドキュメントオブジェクトモデル
    コンセプト:Document Object Modelドキュメントオブジェクトモデルで、タグ言語ドキュメントの各コンポーネントをオブジェクトにカプセル化します.これらのオブジェクトを使用して、タグ言語ドキュメントをCRUDで動的に操作できます.
    W 3 C DOM規格は3つの異なる部分に分けられる.
  • コアDOM:任意の構造化ドキュメントに対する標準モデル
  • Document:文書オブジェクト
  • Element:要素オブジェクト
  • Attribute:属性オブジェクト
  • Text:テキストオブジェクト
  • Comment:注釈オブジェクト
  • Node:ノードオブジェクト、その他の5つの親オブジェクト
  • XML DOM:XMLドキュメント用の標準モデル
  • HTML DOM:HTML文書に対する標準モデル
    • 1.コアDOMモデル
    a.Document:文書オブジェクト
    作成(取得):html domモデルでwindowオブジェクトを使用して-window.document-document(推奨)メソッドを取得できます.
  • Elementオブジェクトを取得する:(document.を省略)
  • getElementById():id属性値に基づいて要素オブジェクトを取得します.id属性値は一般的に一意
    • である
  • getElementsByTagName():要素名に基づいて要素オブジェクトを取得します.戻り値は配列
    • です.
  • getElementsByClassName():Class属性値に基づいて要素オブジェクトを取得します.戻り値は配列
    • です.
  • getElementsByName():name属性値に基づいて要素オブジェクトを取得します.戻り値は配列
    • です.
  • 他のDOMオブジェクトを作成するには:
  • createAttribute(name)
  • createComment()
  • createElement()
  • createTextNode()

  • 属性
    • b.Element:要素オブジェクト
  • 取得/作成:documentによる
    • 取得および作成
  • メソッド:
  • removeAttribute():属性
    • を削除
  • setAttribute():設定属性

    • c.ノード:ノードオブジェクト、その他の5つの親オブジェクト
  • の特徴:domオブジェクトはすべてノード
    • とみなすことができる.
  • メソッド:
  • CRUD domツリー:
  • appendChild():ノードのサブノードリストの最後に新しいサブノードを追加します.
  • removeChild():現在のノードの指定されたサブノードを削除(戻します)します.
  • replaceChild():サブノードを新しいノードに置き換えます.


  • プロパティ:
  • parentNode:ノードの親ノードを返します.


    • 2.HTML DOM
  • ラベルボディの設定と取得:innerHTML
  • html要素オブジェクトのプロパティ
    • を使用
  • 制御要素スタイル
  • クラスセレクタのスタイルを事前に定義し、要素のclassName属性によってclass属性値を設定します.
  • 要素のstyleプロパティを使用して、
    • などの設定を行います.
         //      1
    div1.style.border = "1px solid red";
    div1.style.width = "200px";
    //font-size--> fontSize
    div1.style.fontSize = "20px";

    三、事件の傍受
    概念:一部のコンポーネントがいくつかの操作を実行した後、いくつかのコードの実行をトリガーします.
  • イベント:いくつかのアクション.クリック、ダブルクリック、キーボードが押され、マウスが
    • 移動しました.
  • イベントソース:コンポーネント.例えば、ボタンテキスト入力ボックス...
  • Listener:コード.
  • 登録リスニング:イベント、イベントソース、リスナーを結合します.イベント・ソースでイベントが発生すると、リスナー・コードの実行がトリガーされます.

    • 1.よくあるイベント
  • クリックイベント:
  • onclick:[イベント
    • ]をクリックします.
  • ondblclick:ダブルクリックイベント
  • フォーカスイベント
  • onblur:焦点を失う
  • onfocus:要素は焦点を得る.

  • ロードイベント:
  • onload:1枚のページまたは1枚の画像がロードを完了します.

  • マウスイベント:
  • onmousedownマウスボタンが押されます.
  • onmouseupマウスボタンが離されます.
  • onmousemoveマウスが移動されます.
  • onmouseoverマウスを要素の上に移動します.
  • onmouseoutマウスがエレメントから移動します.

  • キーボードイベント:
  • onkeydownキーボードボタンが押されます.
  • onkeyupキーボードボタンが離されます.
  • onkeypressキーボードボタンが押されて離されます.

  • 選択と変更
  • onchangeドメインの内容が変更される.
  • onselectテキストが選択されます.

  • フォームイベント:
  • onsubmit確認ボタンがクリックされます.
  • onresetリセットボタンがクリックされます.

  • ハイパーリンクを解除する方法
    • クリックしてもジャンプしない

    2.イベントをバインドする方法
  • htmlタグに直接、イベントの属性操作を指定します.属性値はjsコードで、よくある時間は以下の通りです.
  • onclick:マウスクリックイベント
    •   
    
...
function func1() {
        console.log("         -70");
    }
  • jsによって要素オブジェクトを取得し、イベント属性を指定して関数
    • を設定する.
      
    
...
function func2() {
    console.log("-100")
    ruiwen.innerText = "       ...."
}
var ruiwen = document.getElementById("ruiwen");
ruiwen.onclick = func2; //           ！
    Monacaアプリでモバイル端末のIPアドレスを取得する
    50道JAVA基礎プログラミング