노마드 코더 - 바닐라 JS로 크롬 앱 만들기(#3.0 ~ #3.5)

#3.0 The Document Object

HTML의 element 들은 JS를 통해 변경하고 읽을 수 있다.

document -> HTML을 가리키는 객체이다. document가 JS 관점으로 HTML을 보여준다. 모든것들은 document로부터 시작한다. 왜나면 우리의 웹사이트를 의미하기 때문이다.

#3.1 HTML in Javascript

HTML에 항목들을 가지고 와서 JS를 통해 항목들을 변경할 수 있다.

 

document.getElementById() -> 괄호안에 id를 적으면 예를 들어서 html에 id가 title인 element가 있다고 가정하고 

document.getElementById("title") 이렇게 적으면 id로 element를 가져올 수 있는것이다.

const test = document.getElementById('title');

console.dir() -> console.log 와 다른점이 무엇인지 구글링을 해보았는데 그냥 쉽게 말해서 

console.log() 는 매개변수로 전달된 값을 출력하고 console.dir() 은 매개변수로 전달된 객체의 속성을 출력한다.

#3.2 Searching For Elements

getElementsByClassName() : 많은 element들을 한번에 가져올때 쓴다.(array를 반환) 괄호안에 html에 있는 클래스 이름을 써야한다.
getElementsByTagName() : name을 할당할 수 있음(array를 반환) 괄호안에 태그 이름을 써야 한다 div, h1 등등 

querySelector : element를 CSS selector방식으로 검색할 수 있다. 이런식으로 

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

근데 만약 조건에 맞는 것이 여러개라면 첫번째 element만 가져온다. 이때 조건에 맞는 것들을 다 가져오고 싶다면 

querySelectorAll을 사용한다.

#3.3 Events

event: 어떤 행위를 하는 것 

event를 listen 해야 한다. 

h1.addEventListener("click", handTitleClick);

무슨 event를 listen 해야 할지 정해야 하는데 예를 들어서 "click"이라고 쓰면 click event에 대해 listen 하고 싶은 것이다.

그러면 저 위의 코드는 누군가 클릭 하는것을 listen 할것이다.

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

function handTitleClick() {
    h1.style.color = 'blue';
}

h1.addEventListener("click", handTitleClick);

원래 함수를 실행 시키려면 함수명() 이런식으로 괄호를 써야 하는데 함수를 곧바로 실행 시키고 싶지 않을때

function을 JS에 넘겨주고 h1을 click 할때 JS가 실행 버튼을 대신 눌러주길 바르는 것이므로 괄호를 쓰지 않는다.  

#3.4 Events part Two

mouseenter -> 마우스가 특정 위치 위에 위치해 있을때 event 

mouseleave -> 마우스가 특정 위치 위에 위치해 있지 않을때 event 

style 은 JS에서도 바꿀 수 있지만 대부분의 경우 CSS를 통해 변경되어야 한다. 

#3.5 More Events

event를 사용하는 방법에는 2가지가 있다.

h1.addEventListener("click", handTitleClick); // 1번째 방법 
h1.onclick = handTitleClick; // 2번째 방법

1번째 방법을 선호하는 이유는 removeEventListener을 통해서 event listener을 제거할수있기 때문이다.

document의 head,title,body 는 중요하기 때문에 document.body.style~ 은 허용되고

function handleWindowResize() {
    document.body.style.backgroundColor = 'tomato';
}

h1이나 div 같은 것들은 호출이 안되서 querySelcetor나 getElementByID로 호출해야 한다.

window 는 기본 제공이 된다. 

function handleWindowResize() {
    document.body.style.backgroundColor = 'tomato';
}

function handWindowCopy() {
    alert('copier!');
}

function handWindowOffline() {
    alert('no WIFI');
}

function handWindowOnline() {
    alert('ALL GOOD');
}

window.addEventListener('resize',handWindowResize); //화면크기가 바뀌면 event
window.addEventListener('copy',handWindowCopy); // ctrl+c 하면 event
window.addEventListener('offline',handWindowOffline); // wifi가 꺼졌을때 event
window.addEventListener('online',handWindowOnline); // wifi가 켜졌을때 event