DOM으로 html 태그에 접근하기 getElementById, querySelector

DOM으로 html 태그에 접근하는 두가지 방법

 

1) document.getElementBy...

document.getElementById("id명"); //객체로 받아옴
document.getElementsByClassName("class명"); //HTMLCollection 으로 받아옴
document.getElementsByName("name명"); //NodeList 로 받아옴
document.getElementsByTagName("태그명"); //HTMLCollection 으로 받아옴
//Array.from("변수명") 사용하면 HTMLCollection로 받아온 값을 배열로 바꿀 수 있음

 

2) document.querySelector..

document.querySelector("#id명");
document.querySelector(".class명"); //"class명"으로 찾음, 가장 첫번째로 찾은 객체를 반환
document.querySelectorAll(".class명"); //NodeList 로 받아옴
document.querySelector("태그명");

 

부모 객체를 가져온 후 자식 객체의 name을 통해 부모.자식name 이런식으로 자식 객체 접근 가능

---

getElementBy VS querySelector

- getElementBy가 성능면에서는 더 좋음, 하지만 querySelector 하나로 아이디,클래스,태그를 전부 다 가져올 수 있어서 querySelector 더 선호

 

---

NodeList 와 HTMLCollection

- NodeList, HTMLCollection 둘다 유사배열임

- HTMLCollection의 항목은 name, id 속성으로도 접근이 가능하지만,
- NodeList의 항목은 인덱스 번호로만 접근이 가능

- NodeList는 forEach(),entries(), keys(), values() 등 내장되어있음

 

배열로 바꾸는 방법:

- Array.from("변수명")

- 배열로 바꾸고 나서는 배열에 내장되어있는 모든 메소드 사용 가능

 

---

더 공부할 내용:

- getElement, querySelector 이외에도 Node.childNodes가 있음 요건 라이브 콜렉션으로 DOM의 변경 사항을 실시간으로 반영함, 딴걸로 가져온건 바뀌지 않음
참조변수랑 기본형 변수 변경되는 원리랑 비슷한듯? 나중에 자세히 알아보기