바닐라 JS로 크롬 앱 만들기 [2-2] Searching For Elements
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);getElementsByClassName : ClassName이 "hello"인 요소 호출
getElementsByTagName : 태그 이름 호출
- 두가지 모두 배열만 호출
querySelector & querySelectorAll
querySelector
const title = document.querySelector(".hello h1");
console.log(title);결과 :
<h1>grab me!</h1>
- CSS 방식으로 검색
- hello 클래스에 여러개의 h1이 있어도 첫번째 element만 호출
- 해당 id, class의 하위 내용을 가져온다거나 h1을 가지고 오고 싶을 때 사용
querySelectorAll
const title = document.querySelectorAll(".hello h1");
console.log(title);
결과 : NodeList(4) [h1, h1, h1, h1]
- 사용 시 지정 class안의 모든 h1 태그를 포함한 배열 가져옴
응용
innerText 수정
const title = document.querySelector(".hello h1");
title.innerText = "Hello";grab me! -> Hello
const title = document.querySelector(".hello:first-child h1");
title.innerText = "Hello";- class = hello인 div 내부의 first child인 h1 호출
프론트엔드 개발 일기