JAVASCRIPT ON THE BROWSER

• document가 html이 js파일을 load하기 때문에 존재 → 그 다음에 browser가 우리가 document에 접근할 수 있게 해준다.

🔍 Document 객체

• 웹 페이지 그 자체를 의미한다.
• 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.
• HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다.
  • HTML 요소의 선택
  • HTML 요소의 생성
  • HTML 이벤트 핸들러 추가
  • HTML 객체의 선택

1. HTML 요소의 선택

메소드	설명
document.getElementsByTagName(태그이름)	해당 태그 이름의 요소를 모두 선택한다.(array 형태)
document.getElementsByClassName(클래스이름)	해당 클래스에 속한 요소를 모두 선택한다.(array 형태)
document.getElementsByName(name속성값)	해당 name 속성값을 가지는 요소를 모두 선택한다.(array 형태)
document.querySelectorAll(선택자) 선택자 ex. (#아이디 h1)	해당 선택자로 선택되는 요소를 모두 선택한다.(array 형태)
document.querySelector(선택자)	해당 선택자로 선택되는 첫번째 요소를 선택한다.
document.getElementById(아이디)	해당 아이디의 요소를 선택한다.

2. HTML 요소의 생성

메소드	설명
document.createElement(HTML요소)	지정된 HTML 요소를 생성한다.
document.write(텍스트)	HTML 출력 스트림을 통해 텍스트를 출력한다.

3. HTML 이벤트 핸들러 추가

메소드	설명
document.getElementById(아이디).onclick = function(){ 실행할 코드 }	마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가한다.

4. HTML 객체의 선택

객체 집합	설명
document.anchors	name 속성을 가지는 < a >요소를 모두 반환한다.
document.body	< body >요소를 반환한다.
document.cookie	HTML 문서의 쿠키(cookie)를 반환한다.
document.domain	HTML 문서가 위치한 서버의 도메인 네임(domain name)을 반환한다.
document.forms	< form >요소를 모두 반환한다.
document.images	< img >요소를 모두 반환한다.
document.links	href 속성을 가지는 < area >요소와 < a >요소를 모두 반환한다.
document.referrer	링크(linking)되어 있는 문서의 URI를 반환한다.
document.title	< title >요소를 반환한다.
document.URL	HTML 문서의 완전한 URL 주소를 반환한다.
document.baseURI	HTML 문서의 절대 URI(absolute base URI)를 반환한다.
document.doctype	HTML 문서의 문서 타입(doctype)을 반환한다.
document.documentElement	< html >요소를 반환한다.
document.documentMode	웹 브라우저가 사용하고 있는 모드를 반환한다.
document.documentURI	HTML 문서의 URI를 반환한다.
document.embeds	< embed >요소를 모두 반환한다.
document.head	< head >요소를 반환한다.
document.implementation	HTML DOM 구현(implementation)을 반환한다.
document.inputEncoding	HTML 문서의 문자 인코딩(character set) 형식을 반환한다.
document.lastModified	HTML 문서의 마지막 갱신 날짜 및 시간을 반환한다.
document.readyState	HTML 문서의 로딩 상태(loading status)를 반환한다.
document.scripts	< script >요소를 모두 반환한다.
document.strictErrorChecking	오류의 강제 검사 여부를 반환한다.

🔍 Event

• element의 내부를 보고 싶으면 console.dir() 사용하고, 기본적으로 object로 표시한 element를 보여준다.(전부 js object임) 그 element 중 앞에 on이 붙은 것들은 event이다.

1. event

• 어떤 행위를 하는 것이다.
• 모든 event는 js가 listen할 수 있다.

2. eventListener

• event를 listen한다. → js에게 무슨 event를 listen하고 싶은 지 알려줘야 한다.

3. title.addEventListener("click")

• 누군가가 title을 click하는 것을 listen할 거다. → 무언가를 해줘야한다.

const title = document.querySelector("div.hello:first-child h1");

function handleTitleClick(){
title.style.color = "blue";
}
title.addEventListener("click",handleTitleClick);
//click하면 handleTitleClick이라는 function이 동작하길 원한다.
//그래서 handleTitleClick 함수에 () 를 안넣은 것이다.
//즉, js가 대신 실행시켜주길 바라는 것이다.!

• function이 js에게 넘겨주고 유저가 title을 click할 경우에 js가 실행버튼을 대신 눌러주길 바라는 것이다.( 직접 handleTitleClick(); 이렇게 하는 것이 아니라)

• 함수에서 () 이 두 괄호를 추가함으로써 실행버튼을 누를 수 있는 거이다.

4. mouseenter

• 마우스를 올려놓았을 때 event

function handleMouseEnter(){
title.innerText= “Mouse is here”;
}

title.addEventListener(“mouseenter” , handleMouseEnter);

5. mouseleave

• 마우스가 타겟에서 떠났을 때 event

function handleMouseLeave){
title.innerText= “Mouse is gone”;
}

title.addEventListener(“mouseenter” , handleMouseLeave);

• title.onMouseEnter = handleMouseEnter;
  title.addEventListener(“mouseenter” , handleMouseEnter);
  위에 두 코드는 동일하나 addEventListener를 선호하는 이유는 removeEventListener을 통해서 event listener을 제거할수있기 때문이다.

• document에서 body,head,title 은 중요해서 언제든
  ex) document.body 로 가져올수있지만 div나 h1 등 element 들은 querySelector getElementById등으로 찾아야한다.
  ex) document.querySelector(“h1”);

6. window는 기본제공

function handleWindowResize(){
document.body.style.backgroundColor = “tomato”;
}
function handleWindowCopy(){
alert(“copier”);
}

window.addEventListener(“resize”, handleWindowResize);
window.addEventListener(“copy”, handleWindowCopy);

7. className

• 모든걸 교체해버린다. → 이전의 class들은 상관하지 않는다.

8. classList

• class를 목록으로 작업할 수 있게 허용한다.
  remove라는 function은 명시한 class name을 제거하고 add라는 function은 명시한 class name을 추가한다.

function handleTitleClick() {
	const clickedClass = "clicked";
	if(h1.classList.contains(clickedClass)) {
		h1.classList.remove(clickedClass);
	} else {
		h1.classList.add(clickedClass);
	}
}

9. toggle

• class name이 존재하는지 확인한다. → 명시한 class name이 존재하면 class name을 제거하고, class name이 존재하지 않으면 class name을 추가한다.

function handleTitleClick() {
	h1.classList.toggle("clicked");
}

• toggle은 키고 끌 수 있는 버튼 같은거이다.