[vanilla JS] getting the elements

4689 단어 노마드코더vanilla jsjsjs

요소 가져오기

1. document.getElementById("id 이름")

--> id로 element(요소)를 가져올 수 있다.

💻EX

HTML)
...
<body>
  <h1 class = "hello" id = "title"></h1>
  <script src = app.js></script>
</body>
...
JS)
const title = document.getElementById("title")

title.innerText = "Got ya!"

console.log(title.id)
console.log(title.className)

--> (콘솔창)
title
hello

2. document.getElementsByClassName("class 이름"), document.getElementsByTagName("tag" 이름)

-->
ⅰ) class/tag로 요소를 가져올 수 있다
ⅱ) 배열 값을 반환한다.
ⅲ) 많은 요소들을 불러와야 할 때 사용한다.

💻EX

document.getElementsByClassName("class" 이름)
document.getElementsByTagName("tag" 이름)

3. document.querySelector("CSS selector")

--> 요소를 css 방식으로 검색 가능하다.

💻EX

const title = document.querySelector(".hello h1")

console.log(title)
 + document.querySelectorAll()
: 모든 자식 요소를 가져다준다 (배열의 형태로)
[백준/BOJ] 1543. 문서 검색 [Silver 4]
MaxNonoverlappingSegments

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage