[JS] 커스텀 API 구현하기(1) : document.querySelector

node? element?

• nodes: DOM API상에 존재하는 모든 것들을 포괄하는 것. DOM 노드는 종류에 따라 각각 다른 프로퍼티를 지원함.

• element: div, body, window 같이 노트의 특정 유형을 뜻한다.모든 element는 HTMLElement의 자식

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

Document.querySelector()

• elem.querySelector(css)는 주어진 CSS 선택자에 대응하는 요소 중 첫 번째 요소를 반환한다.

const el = document.querySelector(".myclass");

• 문서에서 "myclass"라는 클래스를 사용하는 첫 번째 요소를 반환
• elem.querySelectorAll(css)[0]와 동일

Document.querySelectorAll()

• 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) NodeList 를 반환

• querySelector그리고 querySelectorAll 에 비해 getElementByID가 더 빠름

---

childNodes로 document 살펴보기

1. document.documentElement

2. document.documentElement.childNodes

3. document.documentElement[1].childNodes

4. document.documentElement[1].childNodes[0]

이런식으로 DOM tree를 childNodes로 타고 타고 내려가면서 해당 element의 id/class 값이 내가 찾는 id/class와 일치하면 바로 그 element를 반환하도록 구현하면 될 것 같다!

querySelector 구현

• 찾아야 하는 id/class를 찾을 때까지 DOM tree를 탐색해야하기에 재귀를 통해 탐색을 반복적으로 하다가 id/class를 찾으면 해당 element를 반환하는 형태로 구현 해보고자 한다.

https://ko.javascript.info/basic-dom-node-properties
https://www.kirupa.com/html5/finding_elements_dom_using_querySelector.html