docs: 39.2.1 ~ 39.2.3 정리

Next-by-Next · Jan 16, 2024 · 067b9a0 · 067b9a0
1 parent 2b2c341
commit 067b9a0
Showing 1 changed file with 40 additions and 0 deletions.
diff --git a/docs/39_DOM/나세현.md b/docs/39_DOM/나세현.md
@@ -30,3 +30,43 @@ DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수
 노드 객체에는 노드 객체의 종류와 상관없이 모두 공통으로 갖는 기능도 있고, 타입에 따라 고유한 기능도 있다.  
 예를 들어, 모든 노드 객체는 공통적으로 이벤트를 발생시킬 수 있으며 트리 탐색 기능이나 노드 정보 제공 기능을 갖는다.  
 노드 객체는 공통된 기능일수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 하위에 프로토타입 체인을 구축하여 프로퍼티와 메서드를 제공하는 상속 구조를 갖는다.
+
+### 📍 39.2: 요소 노드 취득
+
+HTML의 구조나 내용, 스타일 등을 동적으로 조작하려면 먼저 요소 노드를 취득해야 한다.
+
+#### `id`를 이용한 요소 노드 취득
+
+`document.getElementById` 메서드는 인수로 전달된 `id` 값을 갖는 첫번째 요소 노드만 반환한다.  
+만약 인수로 전달된 `id` 값을 갖는 HTML 요소가 없는 경우 `null`을 반환한다.  
+HTML 요소에 `id` 어트리뷰트를 부여하면 `id` 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당되는 부수 효과가 있다.
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <div id="foo"></div>
+    <script>
+      console.log(foo === document.getElementById('foo')); // true
+
+      // 암묵적 전역으로 생성된 전역 프로퍼티는 삭제되지만 전역 변수는 삭제되지 않음
+      delete foo;
+      console.log(foo); // <div id="foo"></div>
+    </script>
+  </body>
+</html>
+```
+
+#### 태그 이름을 이용한 요소 노드 취득
+
+`getElementsByTagName` 메서드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 DOM 컬렉션 객체인 HTMLCollection 객체로 반환한다.  
+`getElementsByTagName` 메서드는 `Document.prototype`에 정의된 메서드와 `Element.prototype`에 정의된 메서드가 있다.  
+전자는 DOM의 루트 노드인 문서 노드, 즉 `document`를 통해 호출하며 전체에서 요소 노드를 탐색해 반환한다.  
+하지만 후자는 특정 요소 노드를 통해 호출하며, 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색해 반환한다.  
+인수로 전달된 태그 이름을 갖는 요소가 없다면 빈 HTMLCollection 객체를 반환한다.
+
+#### `class`를 이용한 요소 노드 취득
+
+`getElementsByClassName` 메서드는 인수로 전달한 `class` 값을 갖는 모든 요소 노드들을 탐색해 반환한다.  
+`getElementsByTagName` 메서드와 마찬가지로 HTMLCollection 객체를 반환하며, `Document.prototype`와 `Element.prototype`에 정의된 메서드가 있다.  
+인수로 전달된 `class` 값을 갖는 요소가 없다면 빈 HTMLCollection 객체를 반환한다.