jsのBOM対象とDOM対象

6740 ワード

Pythonベース

(9)プロローグ

var d = {'a':'aa','b':18};
   :
	var d_json = JSON.stringify(d); //python  json.dumps(d);
	
    :
	d_json = "{"a":"aa","b":18}"
	var reverse_json = JSON.parse(d_json);  //python  json.loads()

5、BOM対象
ブラウザのオブジェクトモデルは、ブラウザとの対話の方法とインターフェースを説明します.
(1)パチンコ
alert()とconfirm();
(2)windowオブジェクト、グローバルBOMオブジェクトは、後から学ぶすべての対象のオリジナルオブジェクトです.
(3)locationオブジェクト

location.href;           
location.href = 'http://www.baidu.com';         
location.reload();

(4)タイマー

   :            
	  :var t = setTimeout(function(){confirm('  18   ?')},5000);
		var t = setTimeout("console.log('xxx')",1000);
		t                   
	  :clearTimeout(t)
   :            
	  :var t = setInterval(function(){confirm('   !!')},3000);
	  :clearInterval(t);

6、DOMオブジェクト
ウェブページの内容を処理する方法とインターフェースを説明します.
(1)セレクタを直接検索する
標識によって署名して検索します.var divEle=document.getElements ByTagName(‘div’);ID値で検索すると、var d 1=document.getElemenntById(‘d 1’)となります.クラス値で検索します.var a=document.getElements ByClass Name(‘c 1’)

html  :
	
	
css  :
	   .c1{
            background-color: green;
            height: 100px;
            width: 100px;
        }
        .c2{
            background-color: red;
            /*height: 100px;*/
            /*width: 100px;*/
            color:red;
        }

var d2 = document.getElementsByClassName('c1');
d2.style.color = 'green';  
  ：            ，         ，      d2        ，                
	VM1527:1 Uncaught TypeError: Cannot set property 'color' of undefined
    at :1:16

             
for (var i in d2){console.log(d2[i])};          ，         
  VM1658:1 div1
  VM1658:1 div2
  VM1658:1 2
  VM1658:1 ƒ item() { [native code] }
  VM1658:1 ƒ namedItem() { [native code] }
  
           
for (var i=0;i

（2）间接查找选择器：

.nextElementSibling.style.color = 'red';          ,    
      ：.previousElementSibling;  
      ：.firstElementChild;  
       ：.lastElementChild;  
     ,     ：.children;  
         ：.parentElement;

(3)テキスト操作

innerText
	    :
		var a = document.getElementById('jd')
		a.innerText;         
        :
    	a.innerText = 'スクール？フラワー';      ,         
innerHTML
	    	
		var d = document.getElementsByClassName('c1')[0];
		d.innerHTML;           
	    :
		d2.innerHTML = 'スクール？フラワー';       ,

(4)value値操作

input  
	html:
		
	  :
		var inp = document.getElementById('username');     
		inp.value;     
		inp.value = '200 !';

(5)クラス値操作

var div1 = document.getElementById('d1');
div1.classList;  //       
div1.classList.add('c2'); //     
div1.classList.remove('c3'); //     
div1.classList.toggle('c3');  //     ,     
var t = setInterval("div1.classList.toggle('c3')",1000);  //

(6)スタイル

var div1 = document.getElementById('d1');
div1.style.color = 'green';
// css     -   ，    -，            
div1.style.backgroundColor = 'green';

(7)label補充とbutton補充

label：id name    ，      input  
       : 
        
    
    
      : 
    
 
 button：
         ,      
    
    

            form    
    
    

      ：

(8)日付オブジェクト

var timer = new Date(); //          
timer.toLocaleString(); //                         

     ，      ：
//  1：     
var d1 = new Date(); //      
console.log(d1.toLocaleString());  //            
//  2：        
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");  # / / (    04/03/2020)
console.log(d3.toLocaleString());
//  3：      ，      
var d3 = new Date(5000);  
console.log(d3.toLocaleString());
console.log(d3.toUTCString());  
 
//  4：             
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //        


    
var d = new Date(); 
//getDate()                    
//getDay ()                      ，    （0-6），     0
//getMonth ()                  （0-11,0  1 ,    ）
//getFullYear ()                  
//getHours ()                   
//getMinutes ()                 
//getSeconds ()                
//getMilliseconds ()            
//getTime ()                       ( 1970/1/1  ),

(9)イベント
DOMではラベル設定イベントとして、ラベルバインディングイベントを指定した後、対応イベントがトリガされると、対応コードが実行されます.
よくある事件

onclick、クリック時にトリガイベント

ondblclick、トリガ・イベント

をダブルクリックする.

onchange、コンテンツ修正時にイベント

をトリガする.

onfocus、フォーカスを取得するとイベント

をトリガする.

onblur、ロストフォーカストリガ・イベント

       change  



    
    DOM  






    function changeEvent(self) {
        console.log(self.value);
    }

(10)イベントバインディング
イベントバインディングの2つの方法

  1
 
function doFavor(self) {
        ...
}

  2
 
var dEle = document.getElementsByClassName('favor')
dEle.onclick = function(){
	...
}

js flexのコードを呼び出します.