[vanilla JS] getting the elements


要素のインポート


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(「クラス名」)、document。getElementsByTagName(「tag」名)


-->
I)class/tagを使用して要素をインポートできます
Ⅱ)配列値を返す.
III)多くの要素をロードする必要がある場合に使用する.
💻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()
: 모든 자식 요소를 가져다준다 (배열의 형태로)