HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>valila js</title>
</head>
<body>
<div class="hello">
<h1>grab me!</h1>
</div>
<script src="web.js"></script>
</body>
</html>
요소 가져오기
(getElements)
const hellos = document.getElementsByClassName("hello");
console.log(hellos);
/* [h1.hello, h1.hello, h1.hello, h1.hello] */
- getElementsByClassName : hello라는 class이름을 가진 요소를 가져오는 것
- 배열로 출력
- tagName, ById 등도 있음
querySelector, querySelectorAll
const title = document.querySelector(".hello h1");
console.log(title);
/* <h1>grab me!</h1>
- 요소를 CSS 방식으로 검색
- querySelector는 첫번째 요소만 가져오기 때문에 지정 class 안에 여러개의 h1이 있어도 첫번째 요소만 가져옴
- 해당 id, class의 내용을 가져오거나 위처럼 해당 부분을 그대로 가져오고 싶을 때 사용
const title = document.querySelectorAll(".hello h1");
console.log(title);
/* NodeList(4) [h1, h1, h1, h1] */
- querySelectorAll 사용 시 지정 class안의 모든 h1 태그를 포함한 배열을 가져옴
응용
const title = document.querySelector(".hello h1");
title.innerText = "Hello";
/*grab me! -> Hello */
요소를 불러와서 그 값을 변경할 수 있음
const title = document.querySelector(".hello:first-child h1");
class = hello인 div 내부의 first child에 해당하는 h1을 가져오는 것
'JavaScript' 카테고리의 다른 글
| [JavaScript] CSS 활용한 스타일 변경(className, classList, .toggle) (0) | 2023.11.11 |
|---|---|
| [JavaScript] Event (0) | 2023.11.10 |
| [JavaScript] HTML을 JavaScript 파일에서 사용하는 방법 (0) | 2023.11.10 |
| [JavaScript] Conditional(조건문) (0) | 2023.11.10 |