javaScript-DOM(Document Object Model)

JavaScript

javaScript-DOM(Document Object Model)

용용it 2023. 9. 1. 18:05

DOM(Document Object Model)

DOM이란 HTML 문서를 객체로 표현한 것으로

JS에서 HTML을 제어할 수 있게 해준다.

노드(Node)

DOM의 기본 구성 요소로이다.

HTML 요소, 텍스트, 주석 등 모든 것을 의미한다.

요소(Element)

HTML 요소를 의미한다.

문서 내에서 특정한 태그로 묶은 모든 것을 의미한다.

예를 들어, <div>, <p>, <a>와 같은 HTML 태그로 묶인 내용은 요소이다.

즉, 노드는 DOM의 구성 단위이며, 요소는 그 중 하나로 HTML 문서에서 태그로 묶인 내용을 나타낸다.

<!DOCTYPE html>
<html>
<head>
    <title>DOM 예제</title>
</head>
<body>
    <div class="parent">
        <p>자식 요소 1</p>
        <p>자식 요소 2</p>
        <p>자식 요소 3</p>
    </div>

    <script>
        // 클래스가 "parent"인 요소 선택
        const parent = document.querySelector('.parent')

        // 부모 요소의 모든 자식 노드 확인
        console.log("자식 노드:")
        console.log(parent.childNodes)

        // 부모 요소의 모든 자식 요소 확인
        console.log("자식 요소:")
        console.log(parent.children)
    </script>
</body>
</html>

console.log(parent.childNodes)

먼저 보자,

parent 클래스에 있는 모든 자식 노드를 출력하라고 콘솔로 찍었는데

부분에서 모든 자식 노드의 길이가 7인 이유,

1. 부모 요소 노드: <div class="parent">
2. 텍스트 노드: (공백)
3. 자식 요소 노드: <p>자식 요소 1</p>
4. 텍스트 노드: (공백)
5. 자식 요소 노드: <p>자식 요소 2</p>
6. 텍스트 노드: (공백)
7. 자식 요소 노드: <p>자식 요소 3</p>

이렇게 해서 7이 나오는 것.

어라 ? 근데 모든 자식 요소 노드인데 부모 요소 노드는 왜 포함하지 ?

음..............

도와줘 gpt.

그렇구나~

그럼 다음으로

console.log(parent.chidren) 을 보자

부모 요소의 모든 자식 요소를 확인한다.

맨 처음 말했던 요소는 HTML 태그로 감싼 것들이라고 했으니

콘솔로 찍었을 때
p

이렇게 나온 것이다.

오

그러면

childNodes는 선택한 요소의 모든 자식 노드를 가지고 오지만, 부모 요소 노드도 포함이 되는구나

children은 선택한 요소의 모든 자식 요소 노드를 가져오지만 부모 요소는 포함되지 않는구나 !

모든 노드 접근(부모 포함) : childNodes

자식 요소만 : children