프론트엔드/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>
위 코드를 실행하면 다음과 같은 결과가 나온다.
