2021. 11. 2. 18:21ㆍ강의 정리/노마드코더( 바닐라 JS 강의 )
The Document Object
핵심 : Js가 어떻게 브라우저를 움직이게 하는지
. Js를 사용하는 이유는 HTML과 상호작용하기 위해서이다.
HTML의 Element들을 JS를 통해 변경하고, 읽을 수 있다.
. document는 브라우저에 이미 존재하는 object이다.
HTML을 가르키는 객체이다.
나의 웹사이트를 가리킨다.
document는 JS의 관점으로 HTML을 가르키는 객체이다.
! 우리는 HTML 코드를 JS 관점에서 볼 수 있다.
이는 HTML에 있는 것들을 JS로 가져다 쓸 수 있다는 것(변경, 수정, 추가)을 의미한다.
JS에서 Html을 변경할 수 있다는 것을 보여줌
HTML in JS
핵심 : JS에서 HTML의 특정한 무언가를 가져오는 방법
. index.html
<!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">
<!-- css 연결 -->
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<h1 id="title">Grab me!</h1> ! 추가된 문장
<!-- 자바 스크립트 연결 -->
<script src="app.js"></script>
</body>
</html>
. id를 통해 js로 가져오는 방법
document.getElementByID("ID값")
같은 방법
const title = document.getElementById("title");
console.dir(title);
id값을 통해 js로 html을 가져옴.
! 단순히 HTML에서 가져오는 것이 중요한 것이 아니라, 그걸 JS에서 하고 있다는게 중요한 점이다.
. JS를 통해서 HTML element 변경하기
. 이러한 것들이 가능한 이유는 HTML element에 id를 추가했고, element를 js로 가져온 덕분이다.
. HTML은 그 자체로는 크게 쓸모가 없다. 그러기에 우리는 이 HTML을 JS로 읽어 올 수 있어야한다.
. 가장 중요한 개념은 HTML에서 항목들을 가지고 와서, JS를 통해 항목들을 변경하는 것이다.
Searching For Elements
핵심 : Class를 사용하여 HTML element들을 검색하는 방법
. 대부분의 경우에서는 id 보다는 className을 사용하거나 둘 다 사용함.
. className 사용하여 HTML elements에 접근하는 방법
. index.html
<!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">
<!-- css 연결 -->
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<h1 class="hello">Grab me!</h1> ! 사용할 elements
<!-- 자바 스크립트 연결 -->
<script src="app.js"></script>
</body>
</html>
. app.js
const hellos = document.getElementsByClassName("hello");
. 당연하지만 HTML className과 JS ()안에 className이 같아야 함.
. 대부분 elements들의 각자 다른 className을 사용할 것이다.
. tag Name을 가지고 element들을 가지고 오는 방법 // h1의 태그를 가지고 있는 element들을 가져옴
그러나 이러한 방법들을 element가 아닌 array를 반환하기 때문에 아래와 같은 방법들을 주로 사용한다!
const hellos = document.getElementsByTagName("h1");
. element를 가지고 오는 좋은 방법들을 querySelector와 querySelectorAll이다.
querySelector는 element를 CSS 방식으로 검색할 수 있다.
이는 hello란 class 내부에 있는 h1을 가지고 올 수 있다는 것을 의미한다.
const hellos = document.querySelector(".hello h1");
ex ) const hellos = document.querySelector("div h1"); 도 가능하다.
. querySelector를 사용할 때, 아래 코드와 같이 hello class 안에 h1이 많을 수도 있음.
<div class="hello">
<h1>Grab me!</h1>
</div>
<div class="hello">
<h1>Grab me!</h1>
</div>
<div class="hello">
<h1>Grab me!</h1>
</div>이때 querySelector는 첫번째 것만 가져옴.
. 3개의 element들을 모두 가져오고 싶으면 아래 코드와 같이 하면 됌.
const hellos = document.querySelectorAll(".hello h1");
. id 값을 통해 찾고 싶다면 아래 코드와 같이 하면 됌
const hellos = document.querySelector("#hello");
요약
1. 가장 중요한 개념은 HTML에서 항목들을 가지고 와서, JS를 통해 항목들을 변경하는 것이다.
2. 대부분의 경우에서는 id 보다는 className을 사용하거나 둘 다 사용함.
3. element를 가지고 오는 좋은 방법들을 querySelector와 querySelectorAll이다.
4. querySelector는 element를 CSS 방식으로 검색할 수 있다.
'강의 정리 > 노마드코더( 바닐라 JS 강의 )' 카테고리의 다른 글
| 동백 // 노마드 코더 바닐라JS: Weather (0) | 2021.11.12 |
|---|---|
| 동백 // 노마드 코더 바닐라JS: CLOCK (0) | 2021.11.05 |
| 동백 // 노마드 코더 바닐라JS: Login (0) | 2021.11.04 |
| 동백 // 노마드 코더 바닐라JS: CSS와 JS (0) | 2021.11.03 |
| 동백 //노마드 코더 바닐라JS : Events (0) | 2021.11.02 |