#3.0 The Document Object
Javascript가 웹브라우저를 어떻게 작동시키는지 배울 것이다.
Javascript를 사용하는 이유는 HTML과 상호작용하기 위해서이다.
HTML의 element들을 Javascript를 통해 변경하고 읽을 수 있다는 것.
▶브라우저의 핵심 Object인 document
console에 document를 입력하면 내가 작성한 html에 접근할 수 있다.
▶console.dir(document)
console에 html의 object들을 모두 볼 수 있다.
Javascrip의 title이 html에 입력한 title로 변경된 것을 볼 수 있다.
▶Javascript는 HTML에 접근할 수 있게 되어있다. (HTML을 읽어오는 것)
HTML에 있는 title을 Javascript에서 쓸 수 있다.
▶console에서 document.title을 변경하면(Javascript로 변경) HTML의 title을 변경할 수 있게 된다.
document.title= "lalalala"
와같이 변경할 수 있게 된다.
HTML에 항목을 추가할 수도 있게 되는 것이다.
#3.1 HTML in Javascript
▶Javascript에서 HTML을 가지고 올 수 있다.
index.html 파일에
<body>태그 안에 <h1 id="title">Grab me!</h1>
코드를 추가 후 저장한다. (title이란 아이디를 지정)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<h1 id="title">Grab me!</h1>
<script src="app.js"></script>
</body>
</html>
그런 뒤 콘솔창에 다음을 입력
document.getElementById("title")그러면 다음과 같은 내용이 나온다.
아래가 Javascript에서 HTML을 가져올 수 있는 콘솔 화면.
document 함수 중 getElementById라는 함수를 통해 HTML에서 id를 통해 element를 찾아준다.
element를 찾아서 javascript로 해당 HTML element를 바꿀 수 있다.
app.js파일에
const title = document.getElementById("title");
console.dir(title);
라고 입력 후 저장.
그러면 console 화면에 h1태그에서 가져올 수 있는 많은 element들이 나온다.
정리
1. document에서 항목들을 가져올 수 있다.
2. document 항목들을 수정할 수 있다.
getElementById 함수를 통해 id 로 element를 가져올 수 있다.
(Array로 가져온다)
#3.2 Searching for Elements
getElementById 함수를 통해 id 로 element를 가져올 때 HTML의 id와 같지 않다면
아무것도 찾을 수 없다.
2) getElementsByClassName();
<body>
<h1 class="hello">Grab me!</h1>
<h1 class="hello">Grab me!</h1>
<h1 class="hello">Grab me!</h1>
<h1 class="hello">Grab me!</h1>
<h1 class="hello">Grab me!</h1>
<script src="app.js"></script>
</body>const hellos = document.getElementsByClassName("hello");
console.log(hellos);
결과는
Array로 값을 가져온다.
3) querySelector();
querySelector는 CSS방법으로 element를 검색할 수 있다.
const title = document.querySelector(".hello h1");
console.log(title);
4) querySelectorAll();
querySelector을 사용할 때 <h1>이 많은 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<div class="hello">
<h1>Grab me! 1</h1>
</div>
<div class="hello">
<h1>Grab me! 2</h1>
</div>
<div class="hello">
<h1>Grab me!3 </h1>
</div>
<script src="app.js"></script>
</body>
</html>일 때
const title = document.querySelector(".hello h1");
console.log(title);
의 결과는?
만 console에 표기된다.
hello 클래스에 h1이 많을 수도 있다. 그러나 첫번째 element만 가져온다.
▶element를 다 가져오려면 ?
const title = document.querySelectorAll(".hello h1");
console.log(title);의 결과는 아래와 같다.
querySelectorAll은 Selector 안의 조건에 부합하는 모든 element를 CSS방법으로 가져다 준다.
5) querySelector에서 Id를 가져올 수 있다.
const title = document.querySelector("#hello");
const title = document.getElementById("hello");
다른 점은 위의 것은 하위 element를 선택할 수 있으나 아래 것은 선택할 수 없다. 두개의 함수는 똑같은 결과를 가져온다.
'공부기록 > [강의노트] 바닐라 JS로 크롬 앱 만들기' 카테고리의 다른 글
| 바닐라 JS로 크롬앱 만들기 #3.7~#3.8 (0) | 2022.04.15 |
|---|---|
| 바닐라 JS로 크롬앱 만들기 #3.3~#3.6 (0) | 2022.04.15 |
| 바닐라 JS로 크롬 앱 만들기 #2.15~#2.16 (0) | 2022.04.14 |
| 바닐라 JS로 크롬 앱 만들기 #2.13~#2.15 (0) | 2022.04.13 |
| 바닐라 JS로 크롬 앱 만들기 #2.11~ #2.12 (0) | 2022.04.13 |