The document object
console에 document를 입력하면, 작성한 html을 가져올 수 있다.
document는 브라우저에 존재하는 object
console에 console.dir(document) 를 호출해 보면,document.title이 html에서 정의한 title이랑 같다.
JS에서 html document 객체로 부터 title을 가져올수 있다.
JS를 통해 html을 바꿀 수도 있다.
document.title = "Hi"; (title이 Hi로 바뀐다.)모든 것들은 document로 부터 시작해
web site를 의미 하기 때문이다.
document.body 를 호출하면 body 항목만 가지고 온다.
html in JavaScript
브라우저에서 그냥 사용 할수 있는 'document'라는 object가 있다는걸 알았다.
document의 함수 중에는 getElementById 라는 함수가 있는데,
이 함수가 html 에서 id 를 통해 element를 찾아준다.
element를 찾고 나면 JS로 해당 html의 무엇이든 바꿀 수 있다.
element의 innerText를 바꾼다던가 (title.innerText = "Got you!";)
id, className 등을 가져 올수 있음 (console.log(title.id);)Searching for elements
getElementsByClassName() : 많은 element를 가져 올때 씀 (array를 반환)
getElementsByTagName() : name을 할당 할수 있음 (array를 반환)
querySelector :element를 css selector방식으로 검색 할수 있음 (ex.h1:first-child)단 하나의 elelment를 return 해줌
hello란 class 내부에 있는 h1을 가지고 올 수 있다.(id도 가능함)
첫번째 element만 가져옴
조건에 맞는 세개 다 가져오고 싶으면 querySelectorAll 을 사용 하면 됨
세개의 h1이 들어있는 array를 가져옴
querySelector('#hello); 와 getElementById("hello"); 는 같은 작업을 함
하지만 후자는 하위 요소를 가져오는 것을 못하므로 전자만 쓸것이다.
Events
JS파일이 있기 때문에 JS를 통해 html의 내용을 가져 올 수 있다.
document가 html이 JS파일을 load 하기 때문에 존재
그 다음에 browser가 우리가 document에 접근 할수 있게 해준다.
element의 내부를 보고 싶으면 console.dir()
기본적으로 object로 표시한 element를 보여줌 (전부 JS object)
그 element 중 앞에 on이 붙은 것들은 event이다.
event: 어떤 행위를 하는 것
모든 event는 JS가 listen할 수 있음
eventListener: event를 listen 한다.
JS에게 무슨 event를 listen하고 싶은지 알려줘야 한다.
title.addEventListener("click"); title 을 click하는 것을 listen한다.
그 전에 어떤 거에 event를 걸어 주는 건지 정해야 줘야 한다.
ex:)
title.addEventListener("click"); titleconst title = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
title.style.color = "blue";
}
title.addEventListener("click", handleTitleClick);
click 하면 handleTitleClick이라는 function이 동작하게 된다.
그래서 handle ~ 함수 안에 ( ) 아무것도 넣지 않는거다.
즉 JS가 대신 실행 시켜 주게 되는 거다.
function이 JS에게 넘겨 주고 유저가 title을 click 할 경우에
JS가 실행 버튼을 대신 눌러 주길 바라는 것이다.
( 직접 handleTitleClick(); 이렇게 하는 것이 아니라)
함수에서 () 이 두 괄호를 추가함으로써 실행 버튼을 누를수 있게 되는 것이다.
ex:)
const title = document.querySelector(".hello:first-child h1");
function handleTitleClick(){
title.style.color = "blue";
}
function handleMouseEnter(){
title.innerText = "mouse is here!";
}
function handleMouseLeave(){
title.innerText = "mouse is gone!";
}
title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);JS로 html의 element를 가져오고 가져온 element에 eventlistener추가
event가 발생하면 function이 실행 된다.
document의 body, head, title 이런 것들은 중요하기 때문에
document.body.style ~ 명령이 허용되지만 , div 같은 것들은 호출이 안된다.
나머지 element들은 querySelector나 getElementById 같은 걸로 불러 와야 된다.
title.onclick = handleMouseEnter;
title.addEventListener("mouseenter", handleMouseEnter);위에 두 코드는 동일 하나 addEventListener를 선호하는 이유는
removeEventListener을 통해서 event listener을 제거 할수 있기 때문이다.
window는 기본제공
function handleWindowResize(){
document.body.style.backgroundColor = "tomato";
}
function handleWindowCopy(){
alert("copier");
}
window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);Input value Event
function onLoginSubmit(event){
event.preventDefault();
console.log(event);브라우저가 기본 동작을 실행하지 못하게 막는다.
event object는 preventDefault함수를 기본적으로 갖고 있다.
loginForm.addEventListener("submit", onLoginSubmit);submit 이벤트가 발생한다면, onLoginSubmit 함수를 실행 시킨다는 의미
JS는 onLoginSubmit 함수 호출시 인자를 담아서 호출한다.
해당 인자는 event object를 담은 정보들이다.
⭐️중요⭐️
form 을 submit하면 browser는 기본적으로 페이지를 새로고침 하도록 되어있다.preventDefault()함수를 추가 함으로써 browser의 기본 동작을 막을 수 있다.
이 preventDefault 함수는 EventListener 함수의 '첫번째 argument' 안에 있는 함수이다.
첫 argument는 지금 막 벌어진 event들에 대한 정보를 갖고 있다.
JS는 (기본적으로) argument를 담아서 함수를 호출하는데,
이 argument가 기본 정보들을 제공하고 있다.
ex:) 누가 submit 주체인지, 몇 시에 submit을 했는지 등등 콘솔에 출력해 보면 알수 있다.
