39-3장 DOM - 김은지

docs/39_DOM/김은지.md

@@ -46,3 +46,36 @@ DOM(Document Object Model)
 - 노드 객체의 상속 구조는 개발자 도구 Elements>Properties 패널에서 확인 가능
 - DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드 집합인 DOM API로 제공한다.
 - DOM API를 통해 HTML 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다.
+
+### 39.2 요소 노드 취득
+
+**39.2.4 CSS 선택자를 이용한 요소 노드 취득**
+
+- CSS 선택자 : 스타일을 적용하고자 하는 HTML 요소를 특정할 때 사용하는 문법
+- Document.prototype/Element.prototype.querySelector 메서드 - 인수로 전달한 CSS 선택자를 만족시키는 하나의 요소 노드 탐색 및 반환
+- Document.prototype/Element.prototype.querySelectorAll 메서드 - 인수로 전달한 CSS 선택자를 만족시키는 모든 요소 노드 탐색 및 반환
+- Document.prototype에 정의된 메서드는 DOM 전체에서 요소 노드를 탐색하여 반환하고, Element.prototype에 정의된 메서드는 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색하여 반환한다.
+- 단점 - getElementById, getElementBy\*\*\* 메소드보다 다소 느리다.
+- 장점 - CSS 선택자 문법을 사용하여 좀 더 구체적인 조건으로 요소 노드를 취득할 수 있고 일관된 방식으로 요소 노드를 취득할 수 있다.
+  => 💡 id 어트리뷰트가 있는 요소 노드를 취득하는 경우에는 getElementById 메서드를 사용하고 그 외의 경우에는 querySelector, querySelectorAll 메서드를 사용하는 것을 권장한다.
+
+**39.2.5 특정 요소 노드를 취득할 수 있는 지 확인**
+
+- Element.prototype.matches 메서드
+  - 인수로 전달한 CSS 선택자를 통해 특정 요소 노드를 취득할 수 있는 지 확인한다.
+  - 이벤트 위임을 사용할 때 유용하다.
+
+**39.2.6 HTMLCollection과 NodeList**
+
+- HTMLCollection과 NodeList는
+  - DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체다.
+  - 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는(live) 개체다.
+    - HTMLCollection은 언제나 live 객체로 동작한다.
+    - NodeList는 대부분의 경우 non-live 객체로 동작하지만 경우에 따라 live 객체로 동작할 때가 있다.
+- HTMLCollection
+  - getElementsByTagName, getElementsByClassName 메서드가 반환한다.
+  - 실시간으로 노드 객체의 상태 변경을 반영하여 오소를 제거할 수 있기 때문에 for 문으로 순회하면서 노드 객체의 상태를 변경해야 할 때 주의해야 한다. -> for 문을 역방향으로 순회하는 방법이나 while 문을 사용해 노드 객체가 남아 있지 않을 때까지 무한 반복하는 방법으로 회피할 수 있다. --> HTMLCollection 객체를 사용하지 않고, 배열로 변환하면 더 간단한 해결책!
+- NodeList
+  - HTMLCollection 객체 부작용 해결을 위해 getElementsByTagName, getElementsByClassName 메서드 대신 querySelectorAll 메서드를 사용하는 방법도 있다.
+  - querySelectorAll 메서드가 반환하는 NodeList 객체는 non-live 객체다.
+  - childNodes 프로퍼티가 반환하는 NodeList 객체는 live 객체로 동작한다.