Part. 8 DOM

DPR live - kiss me
DOM (DOCUMENT OBJECT MODEL)

• HTML 문서의 구조와 관계를 객체로 표현한 모델

• HTML 문서를 대표하는 트리 구조

• 자바스크립트에서 document 객체를 통해 전역으로 접근할 수 있음

• 자바스크립트를 이용해서 엘리먼트의 속성값을 얻어내거나, 변경하는 방법

자주 쓰는 속성

-> tagName(태그이름) , id, classList(class 목록), className(class 문자열),

-> attributes(속성 객체), style(스타일객체), value(form 입력값),

-> innerHTML; innerText; texContent(엘리먼트에 담긴 내용)

-> chidren(자식 엘리먼트), parentElement(부모 엘리먼트), childNodes(자식 노드)

-> dataset(data-속성에 담긴 값), onclick; onmouseover; onkeyu(이벤트)

• Event : 어떠한 동작의 발생을 전달하기 위해 객체가 보낸 메세지
  ex ) 웹페이지의로드, 버튼의 클릭, 브라우저창의 Resize

• DOM을 이용해 이벤트 핸들러를 추가할 수 있음
  ex ) onEventName(ex.onClick)

• 댓글을 HTML로 변환하는 과정
  ex ) makeCommentElement(comment)

• 만들어진 댓글 HTML 엘리먼트를 읽기 영역에 붙이는 과정
  ex) readingArea.appendChild(commentElement)

example : 
let DATA = [ { user : “김코딩", msg : “여러분 선플을 남깁시다", createdAt: “2020-11-28 09:00:12”} ]

function printComments() {
DATA.forEach(printComment);
}

function printComment(comment) {
let commentElement = makeCommentElement(comment);
readingArea.appendChild(comment) 
}

function makeCommentElement(comment) {
return liElement;
}

데이터 속성

HTML	<div data-user="steve" data-role="moderator" 
             data-user-id="1">Steve Lee</div>

Javascript	$0.dataset.user // 'steve'
		$0.dataset.role // 'moderator'
		$0.dataset.userID // '1'

클릭 이벤트

HTML	<buttion>Click Me</button>

Javascript	$0.onclick = function () {
      		  console.log('thank you!')
		}
// 위 내용을 아래와 같이 메소드를 이용해 구현할 수도 있다.

Javascript	$0.addEventListner('click', function() {
  		  console.log('thank you!')
		});

• 이벤트는 어떠한 사용자 입력, 또는 다른 트리거에 의해 발생하는 메시지로, 이에 대한 핸들러(리스너)를 추가할 수 있다.

엘리먼트 선택

$0 으로만 DOM을 다루는건 불가능하다. Javascript를 이용해, 특정 엘리먼트를 선택하고, 가져올 수 있다.

• 태그를 이용 : getElementsByTagNAme
• id를 이용 : getElementById
• class를 이용 : getElementByClassName
• selector를 이용 : querySelector / querySelectorAll

DOM 조작

1. innerHTML

• innerHTML 속성은 읽기 뿐만 아니라, 쓰기도 가능한 속성이다.
  HTML 태그를 입력할 수도 있다. 가장 쓰기 쉬운 속성이지만 느리고 보안 위협이 있다.(textContent가 안전하다)

HTML		<div id="target">변경 전</div>

JavaScript	let target = document.querySelector('#target');
		target.innerHTML = '
		<span>변경 후</span>
		';

HTML 출력 결과 	<div id="target">
  		<span>변경 후</span>
		</div>

2. 메소드

• 엘리먼트를 만드는 메소드는 반드시 알아두어야 한다. innerHTML을 이용한 생성에 비해 다소 복잡하게 느껴지지만 메소드를 이용한 엘리먼트 생성은, 생성과 동시에 이벤트 핸들러 등록이 가능하다

HTML		<div id="target">변경 전</div>

JavaScript	let target = document.querySelector('#target');
		let newSpan = document.createElement('SPAN') // span 엘리먼트를 만든다
		newSpan.innerHTMl = '변경 후';
		target.appendChild(newSpan); // target 아랫쪽에 newSpan 엘리먼트를 추가한다

HTML 출력 결과 	<div id="target">
  		<span>변경 후</span>
		</div>

3. < template> 태그

• HTML 조각을 HTML 내에 정의할 수도 있다. < template> 태그는, 실제로 스크립트를 이용해 어딘가 붙여넣기 전까지는 화면에 보이지 않는 HTML 조각이다. 마크업(HTML)과 구현(Javascript)의 구분이 보다 철저하다.

HTML		<template id ="will-be-rendered">
  				<span>변경 후</span>
			</template>

			<div id="target">변경 전</div>

JavaScript	let target = document.querySelector('#target');
		let template = document.querySelector('#will-be-rendered');
// #will-be-rendered 안쪽 내용을 자식 노드를 전부 포함하여 복사합니다.

let newContent = document.importNode(template.content,true);
// target 내용을 비웁니다;

target.innerHTML = '';
target.appendChild(newContent);


HTML출력결과	<div id="target">
  		<span>변경 후</span?
		</div>