how to bring elements from HTML to JS
✦ getElementById("id")
: 요소의 id 속성으로 불러오기.
HTML)
...
<body>
<h1 class = "web" id = "title">My website</h1>
</body>
...JS)
const title = document.getElementById("title");
console.log(title); //<h1 class = "web"id = "title">My website</h1>✦ getElementsByClassName("className")
: 요소의 class 이름으로 불러오기. 한꺼번에 많은 요소들을 불러와야 할 때 사용한다. 리턴 값은 배열.
const.web = document.getElementsByClassName("web");
console.log(web); //<h1 class = "web"id = "title">My website</h1>✦ getElementsByTagName("tagName")
: 요소의 tag 이름으로 불러오기. 한꺼번에 많은 요소들을 불러와야 할 때 사용한다. 리턴 값은 배열.
const title = document.getElementsByTagName("h1");⚠️ getElementsByClassName / getElementsByTagName 에서 "s"를 빼먹지 말자. 이들은 대응하는 요소를 담은 컬렉션(배열)을 반환하기 때문에 중간에 "s"가 들어간다.
⚠️ 한 개의 요소가 아닌 배열을 반환한다. 따라서 첫번째 줄에 있는 코드는 작동하지 않을 것이다.
//doesn't work
document.getElementsByTagName("h1").innerText = "jolly !";
//works !
document.getElementByTagName("h1")[0].innerText = "jolly !";두번째 코드처럼 인덱스를 사용해 요소를 얻고 그 요소에 값을 할당하게 되면 기존 의도대로 동작한다.
✦ querySelector("css selector")
: 요소의 CSS 선택자로 불러오기. 주어진 CSS 선택자에 대응하는 요소 중 첫번째 요소를 반환한다.
HTML)
...
<body>
<div class = "box">
<h1>My website</h1>
<h1>My website</h1>
<h1>My website</h1>
<h1>My website</h1>
<h1>My website</h1>
</div>
</body>
...JS)
const title = document.querySelector(".box h1");
title.innerText = "His website";//첫번째 h1이 "My website"에서 "His website"로 바뀐다.✦ querySelectorAll("css selector")
: 자식 요소 중 주어진 CSS 선택자에 대응하는 모든 요소를 반환한다(=컬렉션/배열 반환).
const all = document.querySelectorAll("h1");
all[1].innerText = "I want to change all of it.";✧ 이들은 모두 DOM 요소들을 제어하기 위한 함수(메서드)들이다.
: DOM = Document Object Model. XML/HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다(계층적 구조로 이루어져 있음). 
(사진: http://www.tcpschool.com/javascript/js_dom_concept)
자바스크립트는 DOM 요소들을 제어하여 새로운 HTML 요소나 속성을 추가할 수 있고, 반대로 존재하는 HTML 요소나 속성을 제거할 수도 있다. 또한 HTML 문서의 모든 HTML/CSS를 변경할 수 있으며, 새로운 이벤트를 추가할 수 있다.
const.title = document.querySelector(".web h1");
title.innerText = "Your website"; //"My website"가 "Your website"로 변함.참고
