📝 docs: 39-3장 DOM 39.2.4 ~ 39.2.6 정리

docs/39_DOM/한수지.md

@@ -187,3 +187,83 @@ getElementsByClassName 메서드는 getElementsByTagName 메서드와 마찬가
 - `Document.prototype.getElementsByClassName` : DOM의 루트 노드인 문서 노드, 즉 document를 통해 호출하며 **DOM 전체에서 요소 노드를 탐색하여 반환**합니다.
 
 - `Element.prototype.getElementsByClassName` : 특정 요소 노드를 통해 호출하며, **특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색하여 반환**합니다.
+
+#### 🔎 2.4 CSS 선택자를 이용한 요소 노드 취득
+
+> `CSS 선택자`(Selector)는 **스타일을 적용하고자 하는 HTML 요소를 특정**할 때 사용하는 문법입니다.
+
+```css
+/* 모든 요소를 선택합니다 */
+* {
+}
+
+/* 특정 id 값은 특정 id앞에 #을 붙입니다. */
+#foo {
+}
+
+/* 특정 class 값은 특정 class앞에 .을 붙입니다. */
+.foo {
+}
+```
+
+`Document.prototype/Element.prototype.querySelector` : 인수로 전달한 CSS 선택자를 만족시키는 **하나의 요소 노드를 탐색하여 반환**합니다.
+
+- 만약 요소 노드가 여러개 인 경우 첫번째로 만족하는 요소를 반환합니다.
+- 존재하지 않을 경우에는 null을 반환합니다.
+- 선택자가 문법에 맞지 않을 경우, DOMException 에러가 발생합니다.
+
+```js
+const elem = document.querySelector(".className");
+```
+
+`Document.prototype/Element.prototype.querySelectorAll` : 인수로 전달한 CSS 선택자를 만족시키는 **모든 요소 노드를 탐색하여 반환**합니다.
+
+querySelectorAll 메서드는 여러개의 요소 노드 객체를 갖는 `DOM 컬렉션 객체인 NodeList 객체를 반환`합니다. (유사배열이면서 이터러블)
+
+- 요소가 존재하지 않을 경우 빈 NodeList 객체를 반환
+- 문법에 맞지 않을 경우, DOMException 에러가 발생
+
+```js
+// ul 요소의 자식 요소인 li 요소들을 모두 탐색하여 반환
+const elem = document.querySelectorAll("ul > li");
+
+// 모든 요소 노드들을 탐색하여 반환
+const all = document.querySelectorAll("*");
+```
+
+CSS 선택자 문법을 사용하는 메서드는 `getElementById` 등의 메서드보다 다소 느리다고 알려져 있습니다.
+
+하지만 CSS 선택자 문법을 사용하여 좀 더 구체적인 조건으로 요소 노드를 취득할 수 있고, 일관된 방식으로 요소 노드를 취득한다는 장점이 존재합니다.
+
+따라서 id 어트리뷰트를 갖는 요소노드를 취득할 경우가 아니라면 querySelector, querySelectorAll을 사용하는 것을 권장합니다.
+
+#### 🔎 2.5 특정 요소 노드를 취득할 수 있는지 확인
+
+`Element.prototype.matches` : 인수로 전달한 **CSS 선택자를 통해 특정 요소 노드를 취득할 수 있는지 확인**합니다.
+
+해당 메서드는 이벤트 위임을 사용할 때 유용합니다.
+
+#### 🔎 2.6 HTMLCollection과 NodeList
+
+> **HTMLCollection과 NodeList은 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체**입니다.
+
+DOM 컬렉션 객체는 유사배열이면서 이터러블입니다. 따라서 스프레드 문, for ...of, 구조분해와 같은 문법과 순회가 가능합니다.
+
+HTMLCollection과 NodeList의 중요한 특징은 `살아있는 객체` 라는 점입니다.
+
+HTMLCollection은 언제나 live 객체로 동작합니다.
+
+NodeList는 대부분 노드 객체 상태 변화를 실시간으로 반영하지 않고 과거의 정적 상태를 유지하는 non-live 객체로 동작하지만 경우에 따라 live객체로 동작하기도 합니다.
+
+- HTMLCollection : **노드 객체 상태 변화를 실시간으로 반영**하는 **살아있는(live) DOM 컬렉션 객체**입니다.
+
+  - getElementsByTagName, getElementsByClassName 등...
+  - HTMLCollection은 실시간으로 노드 객체의 상태를 변경하여 요소를 제거할 수 있기에 부작용이 있기도 합니다.
+
+- NodeList : 실시간으로 노드 객체의 상태 변경을 반영하지 않는(non-live) 객체입니다.
+
+  - querySelectorAll
+  - HTMLCollection 객체의 부작용을 해결하기 위해 사용하기도 함
+  - 경우에 따라 live객체로 동작하기도 함으로 주의가 필요
+
+> 노드 객체의 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하기 위해선, **HTMLCollection과 NodeList 객체를 배열로 변환하여 사용하는 것이 권장**됩니다.