From 1ffe6cfe07f9b8adf0717c1bc471fdc56f747466 Mon Sep 17 00:00:00 2001
From: "DESKTOP-PDMTIQO\\hansu" <fatholic5@gmail.com>
Date: Wed, 17 Jan 2024 21:00:55 +0900
Subject: [PATCH] =?UTF-8?q?:memo:=20docs:=2039-3=EC=9E=A5=20DOM=2039.2.4?=
 =?UTF-8?q?=20~=2039.2.6=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\355\225\234\354\210\230\354\247\200.md"  | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git "a/docs/39_DOM/\355\225\234\354\210\230\354\247\200.md" "b/docs/39_DOM/\355\225\234\354\210\230\354\247\200.md"
index e820af5c..164cb0ae 100644
--- "a/docs/39_DOM/\355\225\234\354\210\230\354\247\200.md"
+++ "b/docs/39_DOM/\355\225\234\354\210\230\354\247\200.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 객체를 배열로 변환하여 사용하는 것이 권장**됩니다.