[JavaScript] document.write와 document.writeln

 

 

 

 

 

 

 

HTML 페이지와 자바스크립트 객체

 

> 자바스크립트 코드는 브라우저로부터 3가지 유형의 객체(BOM객체, 코어객체, HTML DOM객체)를 제공받아 활용할 수 있음.

> BOM(Browser Object Model) 객체 : window, history

> 코어 객체 : array, date

> HTML DOM(Document Object Model) 객체 : document, body

 

 

 

 

DOM Tree

> HTML 태그(<>형태)의 포함관계에 따라 DOM 객체의 트리 형성

> 하나의 document에서

> html 생성

> head와 body로 나뉘고

> head에서 title, meta 등으로 뻗어나감

> body에서 p, fom 등으로 뻗어 나감

> DOM 트리는 부모 자식 관계

> HTML 태그 당 하나의 DOM 객체 생성 = DOM노드(Node), DOM 엘리먼트(Element)라고도 불림

> document객체는 DOM객체가 아님

 

 

 

 

HTML 태그의 요소

 

> 엘리먼트(Element)로도 불림

> 다음 5가지 요소로 구성 : 엘리먼트 이름, 속성(property), CSS3 스타일, 이벤트 리스너, 콘텐츠(innerHTML)

 

ex)

<p id= "firstP" style="color:blue" onclick="thid.style.color='teal'">

  이것은<span style="color:red">문장입니다.</span>

</p>

 

<p> :  태그 이름

id ~ : 속성

style ~ : CSS3스타일

onclick ~ : 이벤트 리스너

이것은 ~ : 콘텐츠(innerHTML) = 시작 태그와 종료 태그 사이에 들어 있는 HTML컨텐츠

 

 

 

 

innerHTML 프로퍼티 수정 

 

>HTML 태그의 콘텐츠 변경

 

ex)

 

 

 

 

DOM 객체의 구성 요소

 

> 프로퍼티 : id, tagName, innerHTML, style

> 메소드 : 함수

> 컬렉션 : 자식 DOM객체

> 이벤트 리스너 : onclick, onkeydown, onload

> CSS스타일 : color, borderColor, marginTop, fontSize 등

 

 

 

HTML 로딩 과정

 

> 브라우저는 HTML 페이지를 로드하기 전 빈 상태인 document를 생성함

> 브라우저는 HTML 페이지를 위에서 아래로 해석함

> HTML태그들을 document 객체에 담아감(DOM 객체 생성)

> 브라우저는 DOM 객체를 화면에 출력

> </html>태그를 만나면 document 객체를 완성하고 닫음 = 로딩이 완료되면 DOM 트리 완성

 

 

 

 

DOM트리에서 DOM 객체 찾기

 

> 태그 이름으로 찾기 = document.getElementsByTagName()

> 클래스 속성으로 찾기 = document.getElementsByClassName()

 

See the Pen 0306 by Nyoung (@dmsud2899) on CodePen.

 

 

 

write()

 

> document 객체에 담긴 HTML 콘텐츠 마지막에 HTML 태그들을 추가함

> 추가되는 HTML 태그들은 DOM 객체로 바뀌고 DOM 트리에 추가함

> 삽입된 HTML 태그들이 브라우저 화면에 출력

 

 

 

writeln()

 

> 한 칸 띄워서 출력

> 한 줄 띄워서 출력 = document.write("<br>");

 

 

See the Pen write1 by Nyoung (@dmsud2899) on CodePen.

 

 

 

write()를 body태그 내에 사용하게 되면 문서 전체가 망가질 수 있음

See the Pen write2 by Nyoung (@dmsud2899) on CodePen.

 

 

 

See the Pen write3 by Nyoung (@dmsud2899) on CodePen.

 

 

 

 

 

 

 

 

참고

---