DOM(2)

LANA·2020년 4월 9일
0

DOM

목록 보기
2/2

cf) codepen: html/css/js 이용한 화면 출력결과 확인 가능


DOM 조작 (innerHTML)

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

HTML

<div id="target">변경 전</div>
<!--
<div id ="target">
  <span>변경 후</span>
<div> 만들기

JavaScript

let target = document.querfySelector('#target');
target.innerHTML = "<span>변경 후</span>" // 
삭제도 동일한 방법을 응용하여 가능함 // target.innerHTML = "" 이런식으로인가?

HTML출력결과

<div id ="target">
  <span>변경 후</span>
<div>

DOM 조작 (메소드)

엘리먼트를 만드는 메소드는 반드시 알아놓기.
innerHTML을 이용한 생성에 비해 다소 복잡하게 느껴질 수 있지만, 메소드를 이용한 엘리먼트 생성은, 생성과 동시에 이벤트 핸들러 등록이 가능하다는 장점이 있음.

HTML

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

JavaScript

let target = document.querfySelector('#target');
let newSpan = document.createElement('SPAN'); // span이라는 '새로운 엘리먼트'를 만듦
newSpan.innerHTML = '변경 후'
target.appendChild(newSpan); // 자식을 첨부한당
// target아랫쪽에 newSpan 엘리먼트를 추가

HTML출력결과

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

DOM 조작 (<template>태그)

HTML 조각을 HTML 내에 정의할 수도 있음. <template>태그는, 실제로 스크립트를 이용해 어딘가 붙여넣기 전까지는 화면에 보이지 않는 HTML 조각(html에 있기는 한데 화면상 보이지 않는 것).
마크업(HTML)과 구현(JavaScript)의 구분이 보다 더 철저함.
템플릿의 내용을 반복적으로 재사용 하고자 하나, html 태그를 JS에 쓰기 싫을 때 사용.(document.createElement를 사용하지 않아도 된다는 의미)

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>


profile
Let's code like chord !

0개의 댓글