####about document

1. document.getElementById("태그의 아이디. 속성값")

예시1

// html -head 태그 사이에 삽입해야 함. css를 html 파일에 삽입하기 momentum App

Grab me!

//script는 body 태그 하단에 삽입해야 함

#app.js//app.js파일에서 실행되는 것. 여기서 h1 id =title을 위의 index.html에서 가져옴 ``` const title = document.getElementById("title"); console.log(title); title.innertext = "Got you!"; //title의 Grab me!를 Got you!로 바꿔줌

예시2

#index.html

title

#app.js
const title = document.getElementById("title");
console.log(title.id); //js로 가져온 title의 아이디를 출력하면 title이 나오게 된다.
console.log(title.className); //js로 가져온 변수 title의 class이름은 hello

****autofocus
<input> 태그의 autofocus 속성은 페이지가 로드될 때 자동으로 포커스(focus)가 <input> 요소로 이동됨
autofocus 속성은 불리언(boolean) 속성
불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 된다. 

### Searching for Element 

getElementByClassName
getElementByTagName

#index.html

Momentum App

Grab me!

```

#app.js

const hellos = document.getElementsBy**ClassName**("hello");
//h1의 class를 가져온다. 
console.log(hellos);
//Grab me! 출력한다. 

const title = document.getElementByTagName("h1");
console.log(title);
//Grab me! 출력한다. 

2. document.querySelector("태그의 아이디. 속성값")

document.getElementBy~ 보다는 querySelector을 더 많이 쓰는 거 같음

예시
#index.html

<h1>Grab me!</h1>

<script src= "app.js"></script>

#app.js > const title = document.querySelector(".hello h1"); console.log(title); //.hello h1 이거나 .hello h1 : first-child /second-child 식으로 h1 태그가 많을 때 순서대로 붙여서 사용이 가능하다. 태그를 찾을 때 사용함! 형태

=hello(클래스 이름).h1(태그) : nth-child(몇 번째 태그 지정)

const title = document.querySelector("#hello");
//hello라는 아이디를 찾을 때는 #을 붙여 준다.

const title = document.querySelector("hello");
//hello라는 클래스를 찾을 때는 앞에 .아니면 아무것도 붙이지 안흔다.

title.style.color
// title의 style- color을 지정해준다.
//javascript는 글자색 바꾸기를 할 수 있음