From 067b9a07fc88a9570fa89e236c1dbc394552f5ae Mon Sep 17 00:00:00 2001 From: sehyun Date: Tue, 16 Jan 2024 11:11:42 +0900 Subject: [PATCH] =?UTF-8?q?docs:=2039.2.1=20~=2039.2.3=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\353\202\230\354\204\270\355\230\204.md" | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git "a/docs/39_DOM/\353\202\230\354\204\270\355\230\204.md" "b/docs/39_DOM/\353\202\230\354\204\270\355\230\204.md" index 74ab339d..b913dda0 100644 --- "a/docs/39_DOM/\353\202\230\354\204\270\355\230\204.md" +++ "b/docs/39_DOM/\353\202\230\354\204\270\355\230\204.md" @@ -30,3 +30,43 @@ DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 노드 객체에는 노드 객체의 종류와 상관없이 모두 공통으로 갖는 기능도 있고, 타입에 따라 고유한 기능도 있다. 예를 들어, 모든 노드 객체는 공통적으로 이벤트를 발생시킬 수 있으며 트리 탐색 기능이나 노드 정보 제공 기능을 갖는다. 노드 객체는 공통된 기능일수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 하위에 프로토타입 체인을 구축하여 프로퍼티와 메서드를 제공하는 상속 구조를 갖는다. + +### 📍 39.2: 요소 노드 취득 + +HTML의 구조나 내용, 스타일 등을 동적으로 조작하려면 먼저 요소 노드를 취득해야 한다. + +#### `id`를 이용한 요소 노드 취득 + +`document.getElementById` 메서드는 인수로 전달된 `id` 값을 갖는 첫번째 요소 노드만 반환한다. +만약 인수로 전달된 `id` 값을 갖는 HTML 요소가 없는 경우 `null`을 반환한다. +HTML 요소에 `id` 어트리뷰트를 부여하면 `id` 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당되는 부수 효과가 있다. + +```html + + + +
+ + + +``` + +#### 태그 이름을 이용한 요소 노드 취득 + +`getElementsByTagName` 메서드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 DOM 컬렉션 객체인 HTMLCollection 객체로 반환한다. +`getElementsByTagName` 메서드는 `Document.prototype`에 정의된 메서드와 `Element.prototype`에 정의된 메서드가 있다. +전자는 DOM의 루트 노드인 문서 노드, 즉 `document`를 통해 호출하며 전체에서 요소 노드를 탐색해 반환한다. +하지만 후자는 특정 요소 노드를 통해 호출하며, 특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색해 반환한다. +인수로 전달된 태그 이름을 갖는 요소가 없다면 빈 HTMLCollection 객체를 반환한다. + +#### `class`를 이용한 요소 노드 취득 + +`getElementsByClassName` 메서드는 인수로 전달한 `class` 값을 갖는 모든 요소 노드들을 탐색해 반환한다. +`getElementsByTagName` 메서드와 마찬가지로 HTMLCollection 객체를 반환하며, `Document.prototype`와 `Element.prototype`에 정의된 메서드가 있다. +인수로 전달된 `class` 값을 갖는 요소가 없다면 빈 HTMLCollection 객체를 반환한다.