728x90
반응형
// const hellos = document.getElementsByClassName("hello");
// console.log(hellos);
// 원하는 요소 추출하기
// const title = document.getElementsByTagName("h1");
// console.log(title);
// css처럼
// querySelector은 동일한 elements가 존재시 가장 먼저 있는 것을 가져옴
const title = document.querySelector(".hello h1");
// 동일한 elements를 모두 가져오려면 => array
const title2 = document.querySelectorAll(".hello h1");
console.log(title);
console.log(title2);
// title의 innerText를 hello로 바꿔보자
title.innerText = "Hello";<!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 App</title>
</head>
<body>
<div class="hello">
<h1>Grab me!</h1>
</div>
<div class="hello">
<h1>Grab me!</h1>
</div>
<div class="hello">
<h1>Grab me!</h1>
</div>
<script src="app.js"></script>
</body>
</html>728x90
반응형
'JS > JS_BASE' 카테고리의 다른 글
| [기본 문법 11] Events part Two (0) | 2023.02.14 |
|---|---|
| [기본 문법 10] Events (0) | 2023.02.14 |
| [기본문법 8] HTML in Javascript (0) | 2023.02.13 |
| [기본문법 7] conditionals (0) | 2023.02.09 |
| [기본문법 6] return (0) | 2023.02.09 |
댓글