프론트엔드/DOM

DOM 조작 - 텍스트 노드에 대한 접근 / 수정

ksge7 2020. 10. 13. 18:50

DOM을 이용해 HTML을 조작할 때 해당 요소 노드가 가진 자식 노드를 조작해야할 때가 있다.

 

즉 요소 노드 밑의 '텍스트 노드'를 다룰 때가 있다.

 

예시로 보자.

 

<body>

    <ul>
        <li id="first">1번</li>
        <li>2번</li>
        <li>3번</li>
    </ul>
    
</body>

 

위 HTML 코드를 실행하면 다음과 같은 결과가 나온다.

 

이때 1번 요소 텍스트에 접근하고 싶다면 어떻게 하면 될까?

 

참고로 각 노드가 가진 값 즉 value를 가져오는 프로퍼티는 'nodevalue'다.

 

그럼 이렇게 하면 되지 않을까?

 

    <script>
        
        var a = document.getElementById("first").nodeValue;
        
        console.log(a); // 'null' 출력
        
    </script>

 

답은 코드에도 썼듯이 'null'이다.

 

요소 노드의 값을 읽어오라고 'nodevalue' 프로퍼티를 썼는데 왜 못읽어올까?

 

바로 그 이유는 요소 노드와 텍스트 노드는 층위가 다르기 때문이다.

 

즉 텍스트 노드는 요소 노도의 하위 관계이므로 요소 노드의 값으로 바로 불러오는 것이 아니다.

 

요소 노드의 자식의 개념으로 접근해야 한다. 다음 코드와 같이 하면 된다.

 

<body>
    <ul>
        <li id="first">1번</li>
        <li>2번</li>
        <li>3번</li>
    </ul>
    
    <script>

        var c = document.getElementById("first").firstChild;
        var d = document.getElementById("first").firstChild.nodeValue;
        
    </script>
</body>

 

위 코드를 실행하면 다음과 같은 결과가 나온다.

 

 

즉 요소 노드에 포함된 텍스트 노드라고해서 바로 접근하면 그 값을 얻을 수 없다.

 

얻기 위해서는 자식 노드의 개념으로 접근해야 한다.

 

여기서 요소 노드에 포함된 텍스트 노드는 하위에 있는 첫 번째 자식의 개념으로 접근해야 한다.

 

만약 1번 텍스트 노드를 바꾸고 싶다면 다음과 같은 코드를 쓰면 된다.

 

<body>
    <ul>
        <li id="first">1번</li>
        <li>2번</li>
        <li>3번</li>
    </ul>
    
    <script>

        document.getElementById("first").firstChild.nodeValue = "변경완료!";

    </script>
</body>

 

위 코드를 실행하면 다음과 같은 결과가 나온다.