컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그

DOM을 이용해 HTML을 조작할 때 해당 요소 노드가 가진 자식 노드를 조작해야할 때가 있다. 즉 요소 노드 밑의 '텍스트 노드'를 다룰 때가 있다. 예시로 보자. 1번 2번 3번 위 HTML 코드를 실행하면 다음과 같은 결과가 나온다. 이때 1번 요소 텍스트에 접근하고 싶다면 어떻게 하면 될까? 참고로 각 노드가 가진 값 즉 value를 가져오는 프로퍼티는 'nodevalue'다. 그럼 이렇게 하면 되지 않을까? 답은 코드에도 썼듯이 'null'이다. 요소 노드의 값을 읽어오라고 'nodevalue' 프로퍼티를 썼는데 왜 못읽어올까? 바로 그 이유는 요소 노드와 텍스트 노드는 층위가 다르기 때문이다. 즉 텍스트 노드는 요소 노도의 하위 관계이므로 요소 노드의 값으로 바로 불러오는 것이 아니다. 요소 ..

DOM의 각 요소 노드에 접근하는 방법은 매우 다양하다. 기본 제공 메서드를 통해 'id', 'class', 'tagname'을 통해서 접근하는 방법이 가장 쉽다. 그리고 다음으로 많이 쓰이는 것은 노드의 관계를 이용한 접근 방법이다. 이게 무슨 이야기냐면 다음과 같다. DOM은 트리 요소로 객체들이 구조화되어 있다. 1번 2번 3번 4번 예를 들어 위의 코드의 요소 노드들의 상관 관계 구조도를 그리면 다음과 같다. HTML 문서 구조상 위아래 관계의 노드는 부모 자식 관계를 맺고 있다. 그리고 동등한 관계의 노드는 형제 관계를 맺고 있다. 결국 노드든 DOM Tree 구조상 다른 노드와 부모, 형제 관계를 맺는다. 그리고 이러한 관계를 이용해 접근해줄 수 있는 프로퍼티가 제공된다. 이름 설명 paren..