오늘은 어제에 이어서 마지막으로 html dom 객체에 대해 알아보려 합니다.

document.write()와 document.writeln()

document.write()은 현재 document 객체에 담긴 html 내용의 마지막에 html 태그를 추가합니다. 추가되는 html 태그들은 DOM 객체로 바뀌고 DOM 트리에 추가됩니다.

document.writeln()는 HTML 텍스트에 ‘\n’을 덧붙여 출력하는 효과를 주지만, 한 칸만 띄어줍니다.

개행은 br 태그를 이용합니다.

단, HTML 문서가 불러와서 출력이 모두 이루어지고 나면, document 객체가 닫히기 때문에 더 이상 HTML 내용을 추가하여 출력할 수 없습니다.

만약 닫힌채로 사용하게 되면 현재 문서가 지워지고 새로운 document를 엽니다.

document.open()과 document.close()

현재 브라우저에 출력된 HTML 내용을 지우고 새로운 HTML 페이지를 시작하는 것을 document.open()이라고 합니다.

현재 브라우저에 출력된 HTML를 완성하는 것을 document.close()라고 합니다. 더 이상 document.write() 할 수 없습니다.

객체의 동적 생성

html 문서가 불러온 뒤에 완성된 document에 자바스크립트를 사용하여 새로운 태그를 추가할 수 있습니다.

document.createElement(“tag-name”)을 넣습니다.

태그 이름의 DOM 객체가 생성되게 됩니다.

객체의 삽입

appendChild(DOM객체);를 사용하여 DOM 객체를 부모의 마지막 자식으로 넣습니다.

새로운 객체가 삽입되면 DOM 트리가 변경되면서 브라우저 화면에 바로 반영됩니다.

객체의 삽입

parent.removeChild(me)를 이용하여 부모 객체에서 자식 객체를 삭제할 수 있습니다.

DOM 객체를 트리에서 제거하면 브라우저 화면에서 바로 사라집니다.

분리되면서 제거된 자식 객체는 DOM 트리의 임의 위치에서 다시 사용될 수 있습니다.