[객체] 2. HTML DOM 객체 - 4) HTML 문서의 동적 구성

* HTML 문서의 로드가 완료된 document에 새로운 HTML 태그를 추가할 수 있다!

→ 자바스크립트 코드를 이용하여 추가하고 싶은 HTML 태그를 나타내는 DOM 객체를 생성하여 DOM 트리에 직접 삽입하면 된다.

 

1) DOM 객체 동적 생성

- document.createElement("태그이름")를 호출하면 HTML 태그의 DOM 객체를 생성할 수 있다.

- 다음은 <div> 태그의 DOM 객체를 생성하는 코드이다.

var newDiv = document.createElement("div");

- 이제 newDiv 객체의 프로퍼티를 이용하여 <div> 태그를 완성할 수 있다.

- 다음은 innerHTML 프로퍼티를 이용하여 <div> 태그에 HTML 텍스트를 삽입하는 코드이다.

newDiv.innerHTML="새로 생성된 DIV 입니다 !";

- 다음 자바스크립트 코드를 이용하여 <div> 태그에 속성을 추가하거나 CSS3 스타일 시트도 달 수 있다.

newDiv.setAttribute("id","myDiv"); //setAttribute()는 DOM 객체에 속성을 추가하는 메소드
newDiv.style.backgroundColor = "yellow"; 

- 위의 코드들을 통해 사실 상 이 코드랑 똑같은 객체인 것이다

<div id="myDiv" style="background-color:yellow">새로 생성된 DIV 입니다 !</div>

 

2) DOM 트리에 삽입

- 이제 위에서 만든 newDiv 객체를 DOM 트리에 삽입해야 한다.

- DOM 객체를 DOM 트리에 삽입하는 여러 가지 방법 중 대표적인 2가지 방법

 

부모.appendChild(DOM객체); //DOM 객체를 부모의 마지막 자식으로 삽입
부모.insertVefore(DOM객체[,기준자식]); //DOM 객체를 부모의 자식 객체 중 기준자식 앞에 삽입

 

- 다음은 앞에서 만든 newDiv 객체를 <p "id=p"> 태그의 마지막 자식으로 추가하는 자바스크립트 코드이다.

var p = document.getElementById("p"); // <p "id=p"> 태그의 DOM 객체 찾기
p.appendChild(newDiv);

 

--> 이 코드에 의해 newDiv가 삽입되면 DOM 트리가 바뀌고 브라우저 화면이 바로 갱신된다.

 

3) DOM 객체의 삭제

- removeChild() 메소드를 이용하면 부모에게서 자식 객체를 떼어낼 수 있다.

var removedObj = 부모.removeChild(떼어내고자 하는 자식 객체);

- "id=myDiv"인 DOM객체를 DOM 트리에서 떼어내고자 하면 다음과 같이 한다.

var myDiv = document.getElementById("myDiv");
var parent = myDiv.parentElement;  //parentElement는 부모 객체를 알아내는 프로퍼티
parent.removeChild(myDiv); // 부모로부터 myDiv 객체 떼어내기

- DOM 객체가 DOM 트리에서 제거되면 브라우저 화면이 즉각 갱신되어 DOM 객체에 의해 출력된 HTML 콘텐츠가 사라진다.

- 떼어낸 myDiv 객체는 DOM 트리의 임의의 위치에 다시 부착할 수 있다.