바닐라 JS_5_document객체와함수

배운점

1. JS는 이미 HTML과 연결되어있음

2. document 객체로 js에서 html에 접근가능
   (html의 요소 불러오기 및 변경이 가능함)

document.title = "hello from js";
//html의 title을 불러와 hello from js로 변경

3. document객체는 여러 함수가 존재

1> document.getElementById();
2> console.dir(title);

const title = document.getElementById("title");
// html안의 (document로 접근) id가 "title" 인 것을 불러와라.
console.dir(title);
//dir 함수는 객체의 속성을 계층구조로 출력

3> document.getElementsByClassName(); //classname에서 가져와고 명시되어있음 (array방식으로 보여줌)

4> document.querySelector(".hello h1"); //명시되어 있지 않기때문에 요소를 css방식으로 검색 >>클라스 hello의 h1을 가져와라
(같은 조건의 h1이 여러개여도 첫번째것 하나만 불러올 수 있음)

<div class = "hello">
<h1>가나다라마바사</h1>
</div>

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

title.style.color = "blue";

느낀점

코딩과제 1번째를 냈는데
막막하고 생각보다 어렵고 그래도 해냈다.
요소들을 불러오는 것, 불러온 요소의 색깔을 변경하는 것
함수를 만드는 것.

사소한 곳들에서 놓치면서 작동하지 않았던 것들이 있었으나

슬랙에서 많음 도움을 받았으면서 막힌 것 조금씩 해결했을때 재미었다.
이후에 나랑 똑같은 곳에서 헤매는 사람들이 질문했을때 도와주며 소통하는데 역시 혼자하는 것보다, 이렇게 서로 물어봐가면서 하니 으쌰으쌰 하게 되는 것같다.

노마드코더 클론코딩 인강을 통하여 배운 것을 복습하는 포스팅이므로 잘못된 정보는 예쁜말로 피드백 주시면 언제나 감사합니다.