Chapter 08. HTML DOM과 Document

Posted on: 2023년 10월 23일 2023년 10월 23일
Categories: 강의자료, 웹프로그래밍

교재 예제
이벤트 리스너 만드는 3가지 방법
1. HTML 태그 내에 작성
2. DOM 객체의 이벤트 리스너 프로퍼티에 작성
3. DOM 객체의 addEventListener() 메소드 이용
자바스크립트 코드는 브라우저로부터 3 가지 유형의 객체를 제공 받아 활용
1. 코어 객체(String, Math, Date, Array, Funciton 등)
2. HTML DOM(Document Object Model) 객체
3. BOM(Browser Object Model) 객체
HTML DOM(Document Object Model) 객체
1. HTML 태그 : 엘리먼트(element)로도 불림, 5 가지 요소로 구성
  1. 엘리먼트 이름
  2. 속성
  3. CSS3 스타일
  4. 이벤트 리스너
  5. 콘텐츠(innerHTML)
2. DOM 객체 : 5 개의 요소 구성
  1. 프로퍼티(property) : HTML 태그의 속성(attribute) 반영
  2. 메소드(method) : DOM 객체의 멤버 함수로서, HTML 태그 제어 가능
  3. 컬렉션(collection) : 자식 DOM 객체들의 주소를 가지는 등 배열과 비슷한 집합적 정보
  4. 이벤트 리스너(event listener) : HTML 태그에 작성된 이벤트 리스너 반영, 약 70여 개의 이벤트 리스너를 가질 수 있음
  5. CSS3 스타일 : HTML 태그에 설정된 CSS3 스타일 시트 정보를 반영, DOM 객체의 style 프로퍼티를 통해 HTML 태그의 모양 제어 가능
this 키워드
1. 객체 자신을 가리키는 자바스크립트 키워드
2. DOM 객체에서 객체 자신을 가리키는 용도로 사용
  1. 예) <div> 태그 자신의 배경을 orange 색으로 변경
    <div onclick=”this.style.backgroundColor=’orange'”>
  2. 예) 버튼이 클릭되면 자신의 배경색을 orange로 변경
    <button onclick=”this.style.backgroundColor=’orange'”>
document
1. HTML 문서 전체를 대변하는 객체
  1. 프로퍼티 – HTML 문서의 전반적인 속성 내포
  2. 메소드 – DOM 객체 검색, DOM 객체 생성, HTML 문서 전반적 제어
2. DOM 객체를 접근하는 경로의 시작점
3. DOM 트리의 최상위 객체
  1. 브라우저는 HTML 문서 로드 전, document 객체를 먼저 생성
  2. document 객체를 뿌리로 하여 DOM 트리 생성
DOM 트리에서 DOM 객체 찾기
1. 태그 이름으로 찾기
  1. document.getElementsByTagName()
  2. 태그 이름이 같은 모든 DOM 객체들을 찾아 컬렉션 리턴
  3. 예) <div> 태그의 모든 DOM 객체 찾기
    1. let divTags = document.getElementsByTagName(“div”);
    2. let n = divTags.length; // 웹 페이지에 있는 <div> 태그의 개수
2. class 속성으로 찾기
  1. document.getElementsByClassName()
  2. class 속성이 같은 모든 DOM 객체들을 찾아 컬렉션 리턴
  3. 예)
    1. <div class=”plain”>…</div>
    2. <div class=”important”>…</div>
    3. <div class=”plain”>…</div>
    4. let plainClasses = document.getElementsByClassName(“plain”);
    5. let n = plainClasses.length; // 웹 페이지에 class=“plain” 속성을 가진 태그의 개수

document의 열기와 닫기, open()과 close()

document.open()
1. 현재 브라우저에 출력된 HTML 콘텐츠를 지우고 새로운 HTML 페이지 시작. 즉 document 객체에 담긴 DOM 트리를 지우고 새로 시작
document.close()
1. 현재 브라우저에 출력된 HTML 페이지 완성
2. 더 이상 document.write() 할 수 없음

예제

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>HTML 문서 작성기 만들기</title>
<script>
let win=null;
function showHTML() {
	if(win == null || win.closed)
		win = window.open("", "outWin", "width=300,height=200");

	let textArea = document.getElementById("srcText");
	win.document.open();
	win.document.write(textArea.value);
	win.document.close();
}
</script>
</head>
<body>
<h3>HTML 문서 작성기 만들기 </h3>
<hr>
<p>아래에 HTML 문서를 작성하고 버튼을 클릭해 보세요.
새 윈도우에 HTML 문서가 출력됩니다.</p>
<textarea id="srcText" rows="10" cols="50"></textarea>
<br>
<br>
<button onclick="showHTML()">HTML 문서 출력하기</button>
</body>
</html>

<!DOCTYPE html>

<html>

let win=null;

function showHTML() {

if(win == null || win.closed)

win = window.open("", "outWin", "width=300,height=200");

let textArea = document.getElementById("srcText");

win.document.open();

win.document.write(textArea.value);

win.document.close();

}

</script>

</head>

<body>

<hr>

<p>아래에 HTML 문서를 작성하고 버튼을 클릭해 보세요.

새 윈도우에 HTML 문서가 출력됩니다.</p>

<br>

</body>

</html>

문서의 동적 구성
1. DOM 객체 동적 생성: document.createElement(“태그이름”)
  1. 태그이름의 DOM 객체 생성
  2. 예)
    let newDIV = document.createElement(“div”);
    newDIV.innerHTML = “새로 생성된 DIV입니다.”;
    newDIV.setAttribute(“id”, “myDiv”);
    newDIV.style.backgroundColor = “yellow”;
2. DOM 트리에 삽입
  1. 부모.appendChild(DOM객체);
  2. 부모.insertBefore(DOM객체 [, 기준자식]);
  3. 예) 생성한 <div> 태그를 <p “id=p”> 태그의 마지막 자식으로 추가
    let p = document.getElementById(“p”);
    p.appendChild(newDiv);
3. DOM 객체의 삭제
  1. let removedObj = 부모.removeChild(떼어내고자하는자식객체);
  2. 예)
    let myDiv = document.getElementById(“myDiv”);
    let parent = myDiv.parentElement;
    parent.removeChild(myDiv);

whan0623

516