Merge pull request #1221 from narinn-star/narinn-star

39-2장 DOM - 이나린
Next-by-Next · Jan 17, 2024 · 18c998e · 18c998e
2 parents aaa7e1b + efacf5d
commit 18c998e
Showing 1 changed file with 122 additions and 1 deletion.
diff --git a/docs/39_DOM/이나린.md b/docs/39_DOM/이나린.md
@@ -1,6 +1,7 @@
 # 🎯 39 DOM
 
-[39.1 노드](#1-노드)
+[39.1 노드](#1-노드)  
+[39.2 요소 노드 취득](#2-요소-노드-취득)
 
 ## 0. DOM
 
@@ -96,3 +97,123 @@ HTML 요소가 객체화된 요소 노드 객체는 HTML 요소가 갖는 공통
 이처럼 노드 객체는 공통된 기능일수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 프로토타입 체인의 하위에 프로토타입 체인을 구축하여 노드 객체에 필요한 기능, 즉 프로퍼티와 메서드를 제공하는 상속 구조를 갖는다.
 
 👉🏻 DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공한다. 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다.
+
+## 2. 요소 노드 취득
+
+HTML의 구조나 내용 또는 스타일 등을 동적으로 조작하려면 요소 노드를 취득해야한다.
+
+HTML 문서 내의 h1 요소의 텍스트를 변경하고 싶은 경우, 먼저 DOM 트리 내에 존재하는 h1 요소 노드를 취득할 필요가 있다. 취득한 요소 노드의 자식 노드인 텍스트 노드를 변경하면 h1 요소의 텍스트가 변경된다.
+
+👉🏻 요소 노드의 취득은 HTML 요소를 조작하는 시작점이다. 이를 위해 DOM은 요소 노드를 취득할 수 있는 다양한 메서드를 제공한다.
+
+### 2.1 id를 이용한 요소 노드 취득
+
+Document.prototype.getElementById 메서드는 인수로 전달한 id 값을 갖는 하나의 요소 노드를 탐색하여 반환한다. 반드시 문서 노드인 document를 통해 호출해야 한다.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <ul>
+      <li id="apple">Apple</li>
+      <li id="banana">Banana</li>
+      <li id="orange">Orange</li>
+    </ul>
+    <script>
+      const $elem = document.getElementById('banana');
+
+      $elem.style.color = 'red';
+    </script>
+  </body>
+</html>
+```
+
+id 값은 HTML 문서 내에서 유일한 값이어야 한다. 단, 중복된 id 값을 갖는 HTML 요소가 여러 개 존재하더라도 어떤 에러도 발생하지 않는다. 그러한 경우, getElementById 메서드는 인수로 전달된 id 값을 갖는 첫 번째 요소 노드만 반환한다. (하나만 반환)
+
+만약 인수로 전달된 id 값이 없다면 getElementById 메서드는 null을 반환한다.
+
+HTML 요소에 id 어트리뷰트를 부여하면 id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당되는 부수 효과가 있다.
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <div id="foo"></div>
+    <script>
+      console.log(foo === document.getElementById('foo'));
+
+      delete foo;
+
+      console.log(foo);
+    </script>
+  </body>
+</html>
+```
+
+id값과 동일한 이름의 전역 변수가 이미 선언되어 있으면 이 전역 변수에 노드 객체가 재할당되지 않는다.
+
+### 2.2 태그 이름을 이용한 요소 노드 취득
+
+Document.prototype/Element.prototype.getElementsByTagName 메서드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환한다. 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
+
+함수는 하나의 값만 반환할 수 있으므로 여러 개의 값을 반환하려면 배열이나 객체와 같은 자료구조에 담아 반환해야 한다. getElementsByTagName 메서드가 반환하는 DOM 컬렉션 객체인 HTMLCollection 객체는 유사 배열 객체이면서 이터러블이다.
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <ul>
+      <li id="apple">Apple</li>
+      <li id="banana">Banana</li>
+      <li id="orange">Orange</li>
+    </ul>
+    <script>
+      const $elem = document.getElementsByTagName('li');
+
+      [...$elems].forEach((elem) => {
+        elem.style.color = 'red';
+      });
+    </script>
+  </body>
+</html>
+```
+
+Element.prototype.getElementsByTagName 메서드는 특정 요소 노드를 통해 호출하며, 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색하여 반환한다.
+
+만약 인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우 getElementsByTagName 메서드는 빈 HTMLCollection 객체를 반환한다.
+
+### 2.3 class를 이용한 요소 노드 취득
+
+Document.prototype/Element.prototype.getElementByClassName 메서드는 인수로 전달한 class 값을 갖는 모든 요소들을 탐색하여 반환한다. 공백으로 구분해 여러 개의 class를 지정할 수 있으며 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.
+
+```html
+<!DOCTYPE html>
+<html>
+  <body>
+    <ul>
+      <li class="fruit apple">Apple</li>
+      <li class="fruit banana">Banana</li>
+      <li class="fruit orange">Orange</li>
+    </ul>
+    <script>
+      const $elems = document.getElementsByClassName('fruit');
+
+      const $apples = document.getElementsByClassName('fruit apple');
+
+      [...$apples].forEach((elem) => {
+        elem.style.color = 'blue';
+      });
+    </script>
+  </body>
+</html>
+```
+
+Document.prototype.getElementsByClassName 메서드는 DOM의 루트 노드인 문서 노드 즉, document를 통해 호출하며 DOM 전체에서 요소 노드를 탐색하여 반환한다.
+
+Element.prototype.getElementsByClassName 메서드는 특정 요소 노드를 통해 호출하며 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색하여 반환한다.
+
+만약 인수로 전달된 class 값을 갖는 요소가 없을 경우, 빈 HTMLCollection 객체를 반환한다.