js 의 BOM 대상 과 DOM 대상

(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(){
	...
}

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

N - Gram 모델 로 데이터 요약 (Python 설명)

자연 언어 에는 n - gram 이라는 모델 이 있 는데 문자 나 언어 중의 n 개의 연속 적 인 단어 구성 서열 을 나타 낸다.자연 언어 분석 을 할 때 n - gram 을 사용 하거나 상용 어 구 를 찾 으 면 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

js 의 BOM 대상 과 DOM 대상

（2）间接查找选择器：

좋은 웹페이지 즐겨찾기