E1 : JS로 DOM 객체 탐색하기

E1 : JS로 DOM 객체 탐색하기

2025. 9. 7. 03:54ㆍFront-end/JavaScript

1. DOM 탐색

DOM의 모든 연산은 document 객체로부터 시작한다.

document 객체는 DOM에 접근하기 위한 진입점인 셈이다.

https://ldd6cr-adness.tistory.com/279

따라서 JS로 HTML 문서에 접근할 때는 document를 통해 접근한다.

html, body, head 태그에 접근할 수 있는 속성들은 각각 아래와 같다.

<html> : document.documentElement
<body> : document.body
<head> : document.head

<!DOCTYPE html>
<html>
  <head>
    <title>DOM 출력 예시</title>
    <script>
        console.log("document.body: " + document.body);	// null
    </script>
  </head>
  <body>
    <script>
      console.log("document.documentElement");
      console.log("document.head");
      console.log("document.body");
    </script>
  </body>
</html>

위 예시에서 <head> 내부에서 document.body를 접근 시도하면 null을 얻는다.

아직 읽지 않았기 때문에 존재하지 않음을 뜻하는 null을 출력하는 것이다.

2. 자식 노드 탐색

자식 노드 (child node / children)
- 바로 아래의 자식 요소를 타나낸다.
- <head>와 <body>는 <html>의 자식 노드
후손 노드 (descendants)
- 중첩 관계에 있는 모든 요소를 의미한다.
- <div>, <ul>, <li> ... 는 <body>의 후손 노드

자식 노드, 후손 노드를 탐색하기 위해 사용하는 속성들을 살펴보자.

아래 속성들은 모두 읽기 전용이다.

또한 거의 대부분의 상호아에서 DOM 컬렉션은 DOM의 현재 상태를 자동으로 반영한다.

[element].childNodes : element의 모든 자식 노드를 담은 컬렉션(collection)
e.g. document.body.childNodes → body의 모든 자식 노드를 담음
[element].firstChild : element의 첫번째 자식 노드
[element].lastChild : element의 마지막 자식 노드
[element].hasChildNodes() : 자식 노드의 존재 여부를 검사하는 함수

for (let node of document.body.childNodes) {
  alert(node);	// 컬렉션 내의 모든 노드를 보여준다.
}

** 컬렉션은 이터러블 유사 배열 객체로, for..of를 사용할 수 있다. (배열은 아니므로 배열 메서드를 쓸 수 없음)
** 컬렉션에는 추가 프로퍼티가 있으므로, for..in은 절대로 사용하면 안된다.

3. 형제 노드

형제 노드 (sibling)
- 같은 부모를 가진 노드 관계이다.
- <head>와 <body>는 형제 노드

형제/ 부모 노드에 대한 정보에 접근하는 속성들을 알아보자.

[element].nextSibling : 다음 형제 노드에 대한 정보
[element].previousSibling : 이전 형제 노드에 대한 정보
[element].parentNode : 부모 노드에 대한 정보

console.log( document.body.parentNode === document.document.Element);	// true
console.log( document.head.nextSibling );	// HTMLBodyElement
console.log( document.body.previousSibling );	// HTMLHeadElement

참고

참고자료링크

'Front-end > JavaScript' 카테고리의 다른 글

DOM 노드에 대응하는 클래스 (0)	2025.09.22
E2 : 요소 검색하기 (0)	2025.09.08
B23 : iterable 객체 (1)	2025.08.29
옵셔널 체이닝 ?. (1)	2025.08.29
B27: JSON 메서드 (0)	2025.08.26

🥔 감자의 오묘한 개발 🥔

🥔 감자의 오묘한 개발 🥔

태그

최근글

댓글

공지사항

아카이브

목차

1. DOM 탐색

2. 자식 노드 탐색

3. 형제 노드

'Front-end > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바