js 의 BOM 대상 과 DOM 대상

6867 단어 파 이 썬 기반
(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. getElementsByTagName ('div');id 값 으로 찾기: var d1 = document. getElement ById ('d1');클래스 값 으로 찾기: var a = document. getElementsByClassName ('c1');
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) class 클래스 값 조작
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) 이벤트 귀속
    이벤트 바 인 딩 의 두 가지 방식
      1
    
    function doFavor(self) { ... } 2
    var dEle = document.getElementsByClassName('favor') dEle.onclick = function(){ ... }

    좋은 웹페이지 즐겨찾기