JavaScript-DOMとBOM

3882 ワード

DOM
ウェブページを読み込むと、ブラウザはページのドキュメントオブジェクトモデル(DOM)を作成します.DOMを通じて、JavaScriptはページ要素にアクセスし、変更することができます.
BOM
ブラウザのオブジェクトモデル(BOM)を通じて、JavaScriptはブラウザと対話することができます.
1.要素の検索

IDで検索しましたが、見つけられなかったらnull

var e = document.getElementById("intro");

に戻ります.

は、ラベル名に基づいて検索し、セットを返します.見つけられないなら、セットは空です.

var ps = document.getElementsByTagName("p");

は、類名検索に基づいて、1つのセット(見つからない場合は、セットが空)に戻ります.

var intros = document.getElementsByClassName("intro");

セレクタによるルックアップ

//             ，       null
var x = document.querySelector("p.intro");

//            ，      （     ，     ）
var xs = document.querySelectorAll("p.intro");

上記の例は、ドキュメント内で要素を検索するので、documentとして指定しても良いし、親要素を指定して検索しても良いです.

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

2.操作要素
元素の内容

var p1 = document.querySelector("#p1");

console.log(p1.innerText);        //     
console.log(p1.innerHTML);        // html  

p1.innerHTML = "Hello, DOM!"

元素の属性

var img = document.querySelector("#image");

console.log(img.src);

img.src = "/i/porsche.jpg";

CSSスタイル

直接修正style属性:

document.getElementById('id1').style.color = 'red';

は、要素のクラス名を変更することにより、そのCSSスタイルを変更する.

document.getElementById('id1').className='btn';

.btn {
  color: blue;
}

3.イベント
イベントハンドラ
例えば、イベントをマウスでクリックします.

document.getElementById("myBtn").onclick = displayDate;

または:

     ！


function changeText(e) { 
    e.innerHTML = "Hello:)";
}

イベントモニターを登録することによって、イベントを処理することもできます.

document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}

事件が広まる
DOMには2つのイベント伝搬の方法があり、addEventListener()の第3のパラメータによって示される.

発泡体(false):最も内側の要素のイベントは、まず処理され、さらに外側になる.

捕獲(true):最も外側の要素のイベントは、まず処理され、更に内側にある.

document.getElementById("myP").addEventListener("click", myFunction, true);

イベントプロセッサを削除

document.getElementById("myDIV").onmousemove = myFunction;
//  
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

4.タイマー
一回限り

t1 = setTimeout(f, ms):ミリ秒後に関数fが実行される.

clearTimeout(t1):満了する前にタイマーt 1を停止する.

間隔

t2 = setInterval(f, ms):ミリ秒ごとに関数fが実行される.

clearInterval(t2):ストップタイマt 2.

var t = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}

5.location

location.href:現在のページのURLを取得または修正するためのもの.

var url = location.href;

location.href = "https://www.baidu.com";    //

location.replace():現在のページを置き換えると、前回のブラウズログは維持されません.

location.replace("https://fanyi.sogou.com/")

location.reload():ページを再読み込みする.

location.reload();
location.reload(true);    //

6.history

history.back():履歴リストの前のURLをロードする.

history forward():履歴リストの次のURLをロードする.

JavaScriptコア原理解析