[JS]Html문서의 태그 선택하기

1. id로 태그 선택하기
document.getElementById('아이디');
해당 아이디의 태그가 선택됨

존재하지 않은 Id를 선택하면 null이 저장된다.


2. class로 태그 선택하기
document.getElementsByClassName('클래스);

HTMLCollection이라는 유사배열이 생성된다.
유사배열 : 일반 배열의 메소드가 사용이 안된다.
인덱스 순서는 깊이와 상관없이 코드가 쓰여진 순서대로 생성된다.
클래스가 하나여도 유사배열이 생성되고
클래스가 없어도 비어있는 유사배열이 생성된다.


3. HTMLCollection 유사배열이란?
1. 숫자 형태의 indexing이 가능
2. length 프로퍼티가 존재
3. 배열의 기본 메소드를 사용할 수 없다.
4. Array.isArray(유사배열) 은 false값이 나온다.

* HTMLCollection의 경우 for .. of 문이 사용 가능하지만 다른 유사배열 경우의 사용이 불가능한 경우도 있다.

* 유사 배열마다 적용가능한 기능이 다를 수 있으니 주의


4. 태그이름으로 태그 선택하기
document.getElementsByTagName('태그이름);

class와 마찬가지로 유사배열이 생성된다.
자주 사용되는 메소드는 아니다.


5. css 선택자로 태그  선택하기
document.querySelector('css선택자');
선택자는 #아이디, .클래스, 태그[속성(=속성값)] 등 다양하게 사용할 수 있다.
위의 메소드를 사용하면 클래스는 가장 위에 것만 선택이 된다.

클래스를 선택할 때는
document.querySelectorAll('.class');
NodeList라는 유사배열이 생성된다.


6. 이벤트 핸들링 예시
const 변수 = document.querySelector(값);

이벤트 핸들링 // 이벤트를 다루는 것
변수.onclick = function(){...} //이벤트 핸들러 >> 이벤트의 동작 정의