[JavaScript]querySelector

1. queryselector 및 getter, setter

// 1 
var mailTitle = document.querySelector('#main_title small') 
=> #은 id고 id안에 small 자식 text값을 가져온다. 
console.log(mailTilte); //하면 나온다. 

var ilbuni = document.querySelector('.ilbuni'); 
// .=> class다 , 처음 하나만 가져옴.
var ilbuniAll = document.querySelectorAll('.ilbuni');  
// 다 가져온다.
console.log(ilbuniAll[1]);// 두번째 놈을 가져온다. 
=> querySelector는 getElementByTag 대용으로 쓰인다.!!!!! 

// 2번
<li class ="ilbuni">
<a href = "www.google.com">Google</a>
<a class = "www.google.com">Google</a>
</li>
<script>
//JQuery에서는 어떻게 쓰는지 알아야 한다.=>>> Jquery 는 완전 편하게 for문도 돌 필요없다. 
for( var i =0 ; i< ilbuni.length; i++)
{
	ilbuni[i].style.border = 'lpx solid red' ; 
	//2번 
    var link = document.querySelector( '.ilbuni a'); 
    console.log( link.getAttribute('href'));  //google을 가져옴.  
    //즉, href의 속성을 가져온다. 
    //즉, href = ' ' 부분을 가져온다. 
	console.log( link.getAttribute('class'));  //google을 가져옴. 
    //즉, class의 속성을 가져온다. 
    //즉, class = ' ' 부분을 가져온다.
    
    // setattribute  
    link.setAttribute( 'href' , "www.naver.com") ; 
    구글이었었는데 네이버로 바뀜. 
}
</script>

//getAttribute는 return값이 있다. 
//setAttribute는 return값이 없다. 

getter는 리턴값있다, setter는 없다. 

 

 

classList.add, remove 

.special
{
	background: pink; 
}
.link-google
{
	color: red; 
}

a.className ="b" ; 
a의 className을 b로 바꾼다. 
a.className ="b c" ; 
a의 className을 b 그리고 c를 추가한다. 
or 
link.classList.add('c' , 'd', 'e' ); // 클래스갯수를 추가해서 늘릴 수 있다.  
setTime(function()
{
link.classremove('link-google'); 
}, 2000); 

 

 

var listElem = document.createElement('li'); 
listElem.innerHTML 

innerhtml 기억하기 , 

appencChild 기억하기

 

요즘엔, onload안하고 window.addEventListener(load, function(){ });으로 실행한다. 

클릭이벤트 눌렀을때, 땠을 때 등등 

마우스 이벤트 

키보드 이벤트 

폰이라면 터치 이벤트

로드 이벤트 

리사이즈 이벤트 .

 

동적인 이벤트 들이 있다. 

 

//미친 코드다 외우자. 

<button class ="btn" > 클릭하세요 </button> 
<script> 
var btn = document.querySelector('.btn'); 
var mainTilte = document.querySelector('#main-title'); 

function btnClickHandler() //기능이다. 이를 버튼과 연결해줘야함.
{
	mainTitle.style.background = 'dodgerblue'; //css 직접 조작. 
}
btn.addEventListner('click', btnClickHandler); 
or 
btn.onclick = btnClickHandler ;  

하지만 차이가 있다 . 
함수 여러개 가능하다. addEventLister자체가 메소드기 때문에
btn.addEventListner('click', btnClickHandler); 
btn.addEventListner('click', btnClickHandler1); 
btn.addEventListner('click', btnClickHandler2); 

onclick 3번을 지정할 수 있지만 속성을 3으로 바꿔버린다. 
btn.onclick = btnClickHandler;  
btn.onclick = btnClickHandler1;  
btn.onclick = btnClickHandler2; //이거로 덮어써버리는 결과가 나온다? 

 

 

1시 43분 인강 꼭 다시 듣기. 

 

 

 

 

btn활성화  클릭이벤트가 들어올 때 

일단 queryselector로 다가져온 뒤 , 메뉴 엑티브가 활성화 되어있는 놈이 있다면 비활성화 시키고 클릭하는놈은 활성화 시켜버린다. 

 

다른 방법. 

 

 

두시 10분까지 들었다 // 이벤트 .. !!!!