javascript Elements 접근

DOM 요소의 선택

HTML 요소를 다루기 위해서는 우선 해당 요소를 선택해야만 합니다.
자바스크립트에서 특정 HTML 요소를 선택하는 방법은 다음과 같습니다.

1. HTML 태그 이름(tag name)을 이용한 선택 -> getElementsByTagName()

2. 아이디(id)를 이용한 선택 -> getElementById()

3. 클래스(class)를 이용한 선택 -> getElementsByClassName()

4. name 속성(attribute)을 이용한 선택 -> getElementByName()

5. CSS 선택자(selector)를 이용한 선택 -> 🟡querySelector(),querySelectorAll()🟡
   querySelectorAll() 메소드는 CSS 선택자(아이디, 클래스, 속성, 속성값 등)를 이용하여 HTML 요소를 선택합니다. -> 즉 css방식으로 html 요소를 선택할수있다.
   querySelector()는 selector안의 조건에 부합하는 첫번째 element를 가지고온다

querySelectorAll()는 selector안의 조건에 부합하는 모든 element를 다 가지고온다

const title1 = document.querySelector(".hello h1")
const title2 = document.querySelectorAll(".hello h1")

6. HTML 객체 집합(object collection)을 이용한 선택
   HTML DOM에서 제공하는 객체 집합(object collection)을 이용하여 HTML 요소를 선택할 수 있습니다.

예외

document의 body,head,title 이런것들은 중요하기 때문에
document.body.style~의 명령이 허용되지만, div같은것들은 호출이 안된다
document.querySelector(“h1”); 쿼리셀렉터로 가지고 와야함

나머지 element들은 querySelector나 getElementById로 불러와야됨

참고: http://www.tcpschool.com/javascript/js_dom_element