예시1
// html -head 태그 사이에 삽입해야 함. css를 html 파일에 삽입하기 momentum App#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!로 바꿔줌Grab me!
//script는 body 태그 하단에 삽입해야 함
예시2
#index.html
#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
#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! 출력한다.
예시
#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는 글자색 바꾸기를 할 수 있음