document
우리가 JS에서 HTML에 접근할 수 있는 방법
브라우저에 이미 존재하는 객체
HTML이 app.js를 로드하기 때문에 존재하는 것
HTML은 CSS, JS를 가져와 브라우저와 연결해주는 접착제 같은 존재
HTML과 상호작용하기 위해 JS를 사용하고, HTML의 element들을 JS로 변경하고 읽을 수 있다.
JS는 HTML에 접근하고 읽을 수 있다. + 변경
document.title
document.title = "new title"
JS는 HTML의 항목들을 읽어올 수 있고, 추가할 수 있다.
document.body
JS에서는 HTML을 표현하는 Object를 보여준다.
우리는 HTML에서 항목들을 가지고 와서, JS를 통해 항목들을 변경한다.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<h1 id="title">Grab me!</h1>
<div class="hello">
<h1>Grab me!</h1>
</div>
<script src="app.js"></script>
</body>
</html>const title = document.getElementById("title")] // querySelector("#title")
const title2 = document.querySelector(".hello h1")
title.innerText = "Got you!" // Grab me! → Got you!
title2.innerText = "Hello" // Grab me! → Hello
console.log(title.id) // title
console.log(title.className) // hello
- an element return
getElementById("id")
querySelector("#id")
- class array return
getElementsByClassName("class")
querySelctorAll(".class")
- first element return
querySelector(".class")
- child(ren) return
querySelecor(".class h1:first-child")
querySelectorAll(".class h1")
- tag array retun
getElementsByTagName("tag")
querySelectorAll("tag")
querySelector() : element를 CSS 방식으로 검색할 수 있다. CSS selector 자체를 전달
but getElement~()는 자식 엘리먼트를 지칭하지 못함
querySelctorAll()
'Front-end > Vanila JS' 카테고리의 다른 글
| [JS] Console 객체 (0) | 2024.04.24 |
|---|---|
| [JS] Events (0) | 2023.12.27 |
| [JS] Conditionals 조건문 (0) | 2023.12.15 |
| [JS] Data Types & Variables 자료형과 변수 (0) | 2023.12.13 |
| Why JS (0) | 2023.12.13 |