js 요소 선택하기

 

JAVASCRIPT	console	반복문 비교
document.getElementById("myDIV")	단일요소
document.getElementsByTagName("div")	유사 배열	for 반복문 가능 for of 반복문 가능 forEach 불가
document.getElementsByClassName("myDiv")	유사 배열
document.querySelector('#myStyle') document.querySelector('.myStyle')	단일요소
document.querySelectorAll('.myStyle')	유사 배열	for 반복문 가능 for of 반복문 가능 forEach 가능

[ 자바스크립트에서 CSS 수정하기 ]

JAVASCRIPT

대상.style.color='red'

대상.style.display='none'

[ 배열의 형식으로 저장되는 요소들(클래스명, 태그명)의 개수 ]

paragraphs.length;

[ 배열의 형식으로 저장되는 요소들(클래스명, 태그명)의 첫번째 선택하기 ]

myDiv[0] paragraphs[0]

[ 배열의 형식으로 저장되는 요소들(클래스명, 태그명) 모두의 색상 변경하기 ]

paragraphs[0].style.color = 'green'; paragraphs[1].style.color = 'green'; paragraphs[2].style.color = 'green'; paragraphs[3].style.color = 'green'; → 아래 반복문으로 커버 for (var i=0; i<paragraphs.length; i++){ paragraphs[i].style.color = 'green'; }

 

[ 자바스크립트 클릭 이벤트 ]

JAVASCRIPT

document.addEventListener('DOMContentLoaded', function(){    //DOM의 컨텐츠 즉(BODY)의 내용이 모두 로드 되면 할일 });

 

[ 자바스크립트 클릭 이벤트 ]

JAVASCRIPT

대상.addEventListener('click',function(){ });

[ 기본문법 ] 

//연결하기 선택자.addEventListener('이벤트종류', 할일); //해제하기 선택자.removeEventListener('이벤트종류', 할일);

[ script.js ] 

var submitBtn = document.getElementById('submit'), container = document.querySelector('.container'); submitBtn.addEventListener('click', function(){ console.log('Hey, I\'ve been clicked!'); });

Event 종류

 

이벤트 명	설명
click	클릭시 발생
change	input 요소의 변동이 있을 때 발생
scroll	스크롤이 발생
focus	포커스를 얻었을 때 발생 (링크, input등의 요소에)
keydown	키를 눌렀을 때 발생
keyup	키에서 손을 땟을 때 발생
load	로드가 완료 되었을 때 발생 (body, image등 선택자가 로드 되었을 때)
mousedown	마우스를 클릭 했을 때 발생
mouseup	마우스에서 손을 땟을 때 발생
mouseover	마우스가 특정 객체 위로 올려졌을 때 발생
mouseout	마우스가 특정 객체 밖으로 나갔을 때 발생
mouseenter	마우스가 특정 객체 안에 들어왔을 때
mouseleave	마우스가 특정 객체에서 떠났을 때
select	option 태그 등에서 선택을 했을 때 발생

[ 유사배열의 형식으로 저장되는 요소들 이벤트 ]

for (var i=0; i< $targetLink.length; i++){     targetLink[i].addEventListener('click',function(){     }); } → targetLink.forEach(function(item){     item.addEventListener('click',function(e){         this.style.color = 'red';     }); }); →     targetLink.forEach(item=>{         item.addEventListener('click',e=>{             e.target.style.color = 'red';               });     });