-
DOM 조작 - 텍스트 노드에 대한 접근 / 수정프론트엔드/DOM 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>위 코드를 실행하면 다음과 같은 결과가 나온다.
'프론트엔드 > DOM' 카테고리의 다른 글
DOM 조작 - 속성 노드의 생성, 수정, 삭제 2 (0) 2020.10.16 DOM 조작 - 속성 노드의 생성, 삭제 (0) 2020.10.16 DOM - 노드의 관계를 통한 접근 (0) 2020.10.07 DOM - 요소노드에 대한 접근 (0) 2020.10.07 DOM에 관해서 (0) 2020.10.07