[개인 필기 / 노마드코더] #3

1.

Javascript는 HTML의 Element를 변경하고 읽을 수 있다.

---

2.

document는 브라우저의 핵심 object이다. 

콘솔창에 document를 입력하면

document란 브라우저에서 이미 설정되어있는 객체이다. 역할은 우리가 작성한 html에 접근할 수 있다.

 

document에 저장되어있는 여러 값들

document의 내용을 보면 이렇게 우리가 설정한 값들이 포함되어 속성으로 들어가있고 이 object 객체를 통해 우리는 다음과 같이 값에 접근할 수 있다.

document 안의 속성값 접근

 또한, 1번에서 말했다시피 접근뿐만 아니라 값을 변경할 수도 있다. 

설정한 값대로

변경되었다.

---

3. 

document.getElementById 라는 프로퍼티는 우리가 설정하나 태그의 id로 값을 가져올 수 있다. 

body 태그 안에 h1 태그 id title

콘솔 창에는 이런식으로 나타난다.

이러한 작업은 app.js에서도 가능하다. (javascript니까)

객체 안의 속성을 모두 바꿀 수 있고 접근할 수 있다.

 

 4. 

getElementByClassName은 해당 클래스 이름을 속성으로 갖는 태그들을 배열의 형태로 반환한다.\

getElementByTag의 형태로 반환이 된다.

이럴 때는 참조 연산자로 곧바로 접근이 어렵다.

[]으로 표현되어있다 -> 배열이다.

 

그래서! 

document.querySelector를 사용하면 바로 접근이 가능하다.

querySelector는 css에서 사용하는 방식으로 태그에 접근할 수 있다.

만약 조건에 해당하는 값들이 많다면 첫번째 것 하나만 반환한다. 

모두 가져오고 싶다면

querySelectorAlll을 사용하면 된다. 

 

5.

addEventListener로 다양한 이벤트에 대한 설정을 할 수 잇다. 

이벤트로는 예를 들어, 마우스 클릭, 마우스 올려두기, 와이파이 접속 끊어짐 등등 많다.

addEventListener("이벤트명", 실행할 동작을 담은 함수) 

 

6. 

https://developer.mozilla.org/en-US/docs/Web/API/Element

Element - Web APIs | MDN

여기를 들어가보면 javascript에서 다룰 수 있는 다양한 이벤트들을 확인할 수 있다. 

 

혹은 console.dir(이벤트를 적용하고자 하는 객체)를 하여 속성 중 on___으로 시작하는 것들이 우리가 다룰 수 있는 이벤트들이다. 

 

7.

위에서 사용했던 이벤트 제어를 더 간편하게 할 수 있는 방법은 on이벤트이름 을 사용하는 것이다.

예를 들어 

title.onclick = handleClick()

이런 식으로 사용하면 된다.

위의 사이트에서 

window는 말그대로 화면을 말한다. 

window 객체에서 인식가능한 이벤트 중 resize가 있다. 이는 화면의 크기 변경을 이벤트로 받아들인다.