HTML DOM을 사용하여 HTML 문서의 노드에 접근하기

 

HTML DOM은 노드에 접근하기 위해 document 객체의 메소드를 사용한다.

 

 

■ getElementById("id");

 

document.getElementById("id") 

  

 문서 안에 있는 노드 중에 파라미터로 전달한 id속성의 값을 사용하는 노드를 반환하는 메소드이다. 이 때 문서에 해당 id 속성을 가진 태그가 존재해야 한다. 없다면 객체 오류를 발생한다. id 속성은 문서내에서 유일한 값을 가지며 같은 값을 가진 태그가 문서내에서 두 개이상 존재해서는 안 된다. 따라서 유일한 id속성을 통해 문서 노드를 접근할 수 있다. (xml문서에서는 작동하지 않을 수 있다.)

 

 

 

■ getElementsByTagName("태그명");

 

document.getElementsByTagName("태그명“) 

 

 파라미터로 전달된 태그이름을 가진 태그들의 배열을 반환하는 메소드이다. 이 메소드는 엘레멘트들을 배열로 반환하여 문서내 순서에 따라 그대로 배열로 반환한다. 이 때 배열의 인덱스는 0번부터 시작한다.

 

 또한, HTML 문서의 트리구조를 이용해 해당 요소 안에 있는 노드를 얻을 수도 있는데 다음과 같다.

 

document.getElementById("main").getElementsByTagName("p");

 

 위 코드는 id속성 값을 “main"으로 가진 엘레멘트의 <p> 엘레멘트 배열을 반환한다. 또한, length 속성을 사용하면 반환된 노드의 수를 알 수 있다.

 

 

 

■ 노드의 추가나 삭제

 

 HTML DOM을 사용하면 접근한 노드 아래에 자식 노드를 추가하거나 삭제할 수 있는데 방법은 아래와 같다.

 

1. 삽입

document.getElementById("parent").appendChild("tagName")

 

2. 삭제

document.getElementById("parent").removeChild("tagName")