JS BOM,ノード,作成要素3方式,イベント,カスタム属性操作,タイマー

カスタム属性アクション

getAttribute()ラベル行内属性

を取得

setAttribute()ラベル行内属性

を設定する.

removeAttribute()ラベル行内属性

を除去する.

とelement.≪プロパティの違い|Properties Difference|emdw≫:上記の3つの方法は、任意の行内(カスタム)プロパティを取得するために使用されます.

スタイル(css)操作
ラベル行にスタイルを表示

var div1 = document.getElementById('div1');
div1.style.width = '100px';

属性値は文字列で、単位を付けなければなりません
クラス名アクション

変更ラベルのclassName属性は、直接変更ラベルのクラス名

に相当します.

var box = document.getElementById('box');
box.className = 'show';
class      className   
class    ，    ，        

ケース

ピクチャ切替QRコードケースcss精霊技術

要素を作成する3つの方法
document.write()

document.write('      
       
');

innerHTMLとinnerText

var box = document.getElementById('box');
box.innerHTML = '
   
';

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

ノードアクション

var body = document.body;
var div = document.createElement('div');
body.appendChild(div);

var firstEle = body.children[0];
body.insertBefore(div, firstEle);

body.removeChild(firstEle);

var text = document.createElement('p');
body.replaceChild(text, div);

イベントの登録/削除の3つの方法

1.
btn.onclick = function() {
	alert(2);
}

2.btn.addEventListener('click', function() {
	alert(1);
});
 

3.        
btn.attachEvent('onclick',    )

イベントの3段階

キャプチャフェーズ

現在の目標フェーズ

発泡段階

パラメータfalseはバブルtrueは捕獲
イベント・オブジェクトのプロパティとメソッド

event.type取得イベントタイプ

clientX/clientYはすべてのブラウザでサポートされており、ウィンドウの場所は

です.

pageX/pageY IE 8以前はサポートされておらず、ページ位置

event.target || event.SrcElementトリガイベントを取得するための要素

event.preventDefault()デフォルト動作をキャンセル

ケース

マウスに従って飛ぶ天使

イベントの伝播を阻止する方法

標準方式event.stopPropagation();

IE低バージョンevent.cancelBubble = true; 規格では廃棄済み

よく使用されるマウスとキーボードイベント

onmouseupマウスボタンを離すと

がトリガーされます.

onmousedownマウスボタン押下トリガ

onmousemoveマウス移動トリガ

onkeyupキーボードボタン押下トリガ

onkeydownキーボードボタン持ち上げトリガ

BOM
BOMのコンセプト
BOM(Browser Object Model)とは、ブラウザオブジェクトモデルを指し、ブラウザオブジェクトモデルはコンテンツとは独立したブラウザウィンドウとインタラクティブなオブジェクト構造を提供する.BOMは、ブラウザウィンドウを表すWindowオブジェクトがBOMの最上位オブジェクトであり、他のオブジェクトがそのオブジェクトのサブオブジェクトである複数のオブジェクトで構成されています.
ブラウザのいくつかの操作はBOMでプログラミングできます.
例えば、ブラウザの更新、後退、前進、ブラウザにURLを入力するなど
BOMのトップオブジェクトwindow
Windowsはブラウザのトップクラスのオブジェクトで、windowの下の属性と方法を呼び出す時、windowの注意を省略することができます:windowの次の特殊な属性window.name
ダイアログ

alert()

prompt()

confirm()

ページ・ロード・イベント

onload

window.onload = function () {
  //          
  //            （    、    、CSS    ）  
}

onunload

window.onunload = function () {
  //           
}

タイマ
settimeout()とcleartimeout()
指定したミリ秒数が到着した後に指定した関数を実行し、一度だけ実行します.

//        ，1000     ，        
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);

//         
clearTimeout(timerId);

setInterval()とclearInterval()
所定の時間(ミリ秒単位)の周期で関数を呼び出すタイミング呼び出し関数

//        ，  1     
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);

//         
clearInterval(timerId);